Vue 2.6.11 で確認
v-modelでバインドした変数を監視したとき、
つまり
<div id="app">
<div>
<input type="checkbox" v-model="check" />オンにならないはず
</div>
<div>{{ getString(check) }}</div>
</div>
こんなんがあって、
new Vue({
el: "#app",
data: {
check: false,
},
methods: {
getString: function(target) {
return JSON.stringify(target);
},
},
watch: {
check: function(){
if (this.check) {
this.check = false;
}
}
}
});
チェックボックスオンにするけど、watchで監視して、trueになったらfalseにするようにしているので、想定では、このチェックボックスはオンになることはない
が、
変数checkはfalseにはなるが、画面上の表示はチェックボックスがオンとなる
困った
のでこうした
watch: {
check: function(){
if (this.check) {
setTimeout(() => {this.check = false}, 0);
}
}
}
この動き、Vue 2.2.1では、setTimeoutかまさなくても、チェックボックスオフとなった。