Vue.Js - How to Properly Watch for Nested Data

Vue.js - How to properly watch for nested data

You can use a deep watcher for that:

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

This will now detect any changes to the objects in the item array and additions to the array itself (when used with Vue.set). Here's a JSFiddle: http://jsfiddle.net/je2rw3rs/

EDIT

If you don't want to watch for every change on the top level object, and just want a less awkward syntax for watching nested objects directly, you can simply watch a computed instead:

var vm = new Vue({
  el: '#app',
  computed: {
    foo() {
      return this.item.foo;
    }
  },
  watch: {
    foo() {
      console.log('Foo Changed!');
    }
  },
  data: {
    item: {
      foo: 'foo'
    }
  }
})

Here's the JSFiddle: http://jsfiddle.net/oa07r5fw/

Vue watch nested property

you should use deep:true for nested data like this:

    watch: {
        dataitem: {
                    handler: function (val) {
                 console.log(val);  
                    },
                    deep: true
                },
    }

Watch change in nested property in Vue 3

Try to use a getter function instead of the property path :

 watch(()=>state.form.service_id, (newVal, oldVal) => {
     console.log('service changed');
 }, { deep: true });
 

vue.js - how to watch property of nested object and get index?

I think what you want is @input handler instead of @onChange.

<div class="flexi-numbers" v-for="(flex, key) in mt.flexi">

  <multiselect 
    :allow-empty="false" 
    deselect-label="" 
    select-label="" 
    v-model="flex.operator_id" 
    :options="operatorList" 
    :preserve-search="true" 
    placeholder="Operator" 
    label="name" 
    track-by="name" 
    :preselect-first="false" 

    @input="operatorChanged(key)">

    <template slot="tag" slot-scope="props">
      <span>{{ props.option.name }}</span>
      <span @click="props.remove(props.option)">x</span> 
    </template>

  </multiselect>

<!-- other stuff -->

Is the any way to watch operator_id value or object index?

operatorChanged(key) {
  // "key" here should be the index being selected,
  // and of course to get the "operator_id"

  this.mt.flexi[key].operator_id
},

---

Related Topics