Vue.jsでの “You may have an infinite update loop” の対策

仕事でVue.js v2を使ったフロントエンド開発をしている。フォームのバリデーションなどで,以下のように,データをチェックして必要に応じて変更しながら,確認結果を返すような処理を実装した。

<template>
<div>
<input type="text" @input="validation" v-model="data"></input
<button :class="{'valid': data.length}" :disabled="validation()"></button>
</div>
</template>
...
<script>
export default {
data() {
return {
data: ""
} }
},
method: {
validation() {
this.data = ""
return true
}
}
}
</script>

すると,[You may have an infinite update loop] の警告が表示されてしまった。

この警告の対策方法がよくわからず困った。こちらの「Vue で `You may have an infinite update loop` の警告が出る原因とその対処法 – Qiita」の内容で意味が理解できて解決できたので,整理する。

この警告は,テンプレート内のメソッドの中で,dataプロパティの値を変更しているのが原因となる。

描画処理をしている最中に,そのプロパティを変更するため無限ループに入る可能性があるというのが警告の理由だ。

対策
  1. v-bindでは値を読み取るだけにする。
  2. 変数を変更する処理をv-onwatchに移す。

1のv-bindでは値を読み取るだけにするのが,一番重要な方針となる。

今回は,横着してv-bindの関数で値を変更してしまった。関数で値を変更するのではなく,専用のプロパティを用意しておいて,こちらのプロパティをv-onで書き換える形にする。

具体的には,以下のように処理を変更した。

<template>
<div>
<input type="text" @input="validation" v-model="data"></input
<button :class="{'valid': !disabled}" :disabled="disabled"></button>
</div>
</template>
...
<script>
export default {
data() {
return {
disabled: true
data: ""
} }
},
method: {
validation() {
disabled = !data
}
}
}
</script>

新しく,disabled変数を用意して,こちらの値を関数で書き換えるようにした。これにより,警告を回避できた。

v-bindは非常によく使うので,値を読むだけという基本方針を守って実装したい。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です