CODEWITHSUNDEEP
vue.js
KDani
KDani

Reputation: 458

Vue watch nested property

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);
      }
    },
  },
};

Upvotes: 0

Views: 3643

Answers (1)

Ali SaZa
Ali SaZa

Reputation: 95

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

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

Upvotes: 1

Related Questions