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-onやwatchに移す。

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は非常によく使うので，値を読むだけという基本方針を守って実装したい。