구성 요소에서 Vue 더티 상태 트리거

구성 요소에서 Vue 더티 상태 트리거

Vue에 입력 필드가 있는 페이지가 있습니다.누군가가 그 컴포넌트의 입력 필드를 변경했을 때 메시지를 표시하고 싶다.isDirty 기능을 사용할 수 있는 Angular에는 익숙하지만 Vue에는 그런 기능이 없습니다.

Vue 뷰에서 모든 키업 이벤트를 캡처할 수 있는 방법이 있습니까?그러면 메시지를 표시하기 위해 변수를 true로 설정할 수 있습니다.

이제 모든 입력 모델에 다음 항목이 추가되었습니다.<input v-model="foo" @change="someThingChanged()">

Vue 뷰에서 모든 키업 이벤트를 캡처할 수 있는 방법이 있습니까?

싱글 바인드 가능onchange상위 컨테이너의 이벤트 및 변경 이벤트가 버블이 된다는 이점:

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

저는 Vue에 경험이 별로 없지만 여기서 보는 게 더 좋은 것 같아요.

 watch: {
 item: {
    handler(val){
      // do stuff
    },
    deep: true
  }
}

더러움을 확인하는 것 외에, 컴포넌트 네비게이션 가드를 사용하여 폼이 더러울 경우 사용자가 다른 곳으로 이동하지 못하도록 할 수도 있습니다.BeforeRouteVue컴포넌트 루트 gaurd.

...
data: {
  formDirty: false, 
}
methods: {
  somethingchanged() {
    formDirty = true,
  }
}
beforeRouteLeave (to, from, next) {
  if(formDirty){
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
    if (answer) {
      return next()
    } else {
      return next(false)
    }
  }
  return next()
}
...

DOM에서 키나 변경 이벤트를 감시하는 대신 관찰만 하는 것이 좋습니다.foo이미 컴포넌트 상태에 있습니다.이 경우, 나는 다음을 기반으로 한 계산된 함수를 사용했다.foo:

const app = new Vue({
  el: '#vue-wrapper',
  data: {
    foo: '',
  },
  computed: {
    showMessage() {
      return (!!this.foo) // <-- your logic here
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="vue-wrapper">
  Foo: <input v-model="foo">
  <div v-if="showMessage">This will be shown if foo is not empty</div>
</div>

언급URL : https://stackoverflow.com/questions/48579199/vue-dirty-state-triggering-in-component