Reputation: 458
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
Reputation: 95
you should use deep:true for nested data like this:
watch: {
dataitem: {
handler: function (val) {
console.log(val);
},
deep: true
},
}
Upvotes: 1