[Vuejs]-Find out which property changed in a Vue.js deep custom directive?

by

0👍

You can use a computed property to create a new object whenever your item changes, and then use this computed in your directive:

computed: {
    _item () {
      return Object.assign({}, this.item)
    },
  },
<div id='testdiv' v-demo="_item">
  <div>
    {{item.name}}
  </div>
  <div>
    {{item.place}}
  </div>
</div>

Other solution would be to store you item in the HTML element (provided by the directive) and then when then in the update hook, do a manual comparation, something like this:

function update(el, { value }) {
  if (JSON.stringify(el.__item) === JSON.stringify(value)) {
    return
  }
  bind(el, { value })
}

Leave a comment