web-dev-qa-db-ja.com

VueJでダーティ状態を実装する方法

私は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) 
        }
    }
});

これを行うより良い方法はありますか、または上記のコードで提案できる改善はありますか？

vuejs2dirty-checking
6
Menelaos Vergis

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
  }
}
});
1
IVO GELOV

借用-> https://stackoverflow.com/a/48579303/4050261

単一のonchangeイベントを親コンテナにバインドして、変更イベントがバブルするという利点を活用できます。

<div class="container" @change="someThingChanged()">
  <input v-model="foo">
  <input v-model="bar">
  ... etc.
</div>
0
Adarsh Madrecha