Vue watch nested property

Question

How can I watch a nested field on a component property in Vue? On the data item the code is working, but when I try to watch my prop, then nothing happens.

export default {
  data: () => ({
    dataitem: {
      nested: "",
    },
  }),
  
  props: {
    propitem: {
      type: Object,
      default() {
        return {
          nested: "",
        };
      },
    },
  },

  watch: {
    // it is working
    "dataitem.nested": function(val) {
        console.log(val);
      }
    },

    // and it's not
    "propitem.nested": function(val) {
        console.log(val);
      }
    },
  },
};

ref https://stackoverflow.com/questions/42133894/vue-js-how-to-properly-watch-for-nested-data — Cosimo Chellini, Sep 30 '20 at 12:04

score 1 · Accepted Answer · answered Sep 30 '20 at 12:10

1

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

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

answered Sep 30 '20 at 12:10

Ali SaZa

95
4
14

Hmm, it does the job until i do not bind the property to the component. After binding `` the watch stops working. – KDani Sep 30 '20 at 12:29
your bug in props value? @KDani – Ali SaZa Sep 30 '20 at 12:42
Yes. Maybe I binding the value on the wrong way, I don't know. – KDani Sep 30 '20 at 12:50
before use, watch write data on other variables and write this variable in the watch.@KDani – Ali SaZa Sep 30 '20 at 12:54

Vue watch nested property

1 Answers1