私はVueJを初めて使用し、モデルで変更が発生した場合にのみSave
ボタンを有効にするフォームに取り組んでいます。
私の最初の考えは、初期モデルと現在のモデルを比較するダーティ関数をcompute
することです。
注:このコードはテストされていません。ここでは例として示しています。
var app = new Vue({
el: '#app',
data: {a:0, b:'', c:{c1:null, c2:0, c3:'test'}},
initialData: null,
mounted():{ initialData = JSON.parse(JSON.stringify(data));},
computed: {
isDirty: function () {
return JSON.stringify(data) === JSON.stringify(initialData)
}
}
});
これを行うより良い方法はありますか、または上記のコードで提案できる改善はありますか?
manual に示すように、deep
のwatch
オプションを使用できます。
var app = new Vue({
el: '#app',
data:
{
model:
{
a:0,
b:'',
c:
{
c1:null,
c2:0,
c3:'test'
}
},
dirty: false
},
watch:
{
model:
{
handler(newVal, oldVal)
{
this.dirty = true;
},
deep: true
}
}
});
借用-> https://stackoverflow.com/a/48579303/4050261
単一のonchange
イベントを親コンテナにバインドして、変更イベントがバブルするという利点を活用できます。
<div class="container" @change="someThingChanged()">
<input v-model="foo">
<input v-model="bar">
... etc.
</div>