VueJs에서 더티 스테이트를 구현하는 방법

VueJs에서 더티 스테이트를 구현하는 방법

저는 VueJs를 처음 사용하는 사용자로,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) 
        }
    }
});

이 작업을 수행하는 더 나은 방법이나 상기 코드에 대해 제안할 수 있는 개선 사항이 있습니까?

를 사용할 수 있습니다.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>

언급URL : https://stackoverflow.com/questions/52343140/how-to-implement-dirty-state-in-vuejs