如何在 VueJs 中实现脏状态

Question

我是 VueJs 的新手，我正在处理一个表单，我想仅在模型发生更改时启用 Save 按钮。

我最初的想法是 compute 比较初始模型与当前模型的脏函数。

Note: This code is not tested, it's here just for an example.

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

是否有更好的方法来执行此操作，或者您是否可以对上述代码提出任何改进建议？

Answer 1

您可以使用 watch 的 deep 选项，如 manual

中所示

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

Answer 2

借用自 -->

您可以在父容器上绑定单个 onchange 事件并受益于更改事件冒泡的事实：

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

如何在 VueJs 中实现脏状态

How to implement dirty state in VueJs

vuejs2

dirty-checking