我有一个 customer
对象作为我的初始数据。我有文本字段,当有人开始输入时,它会向对象添加不同的键。当一个新的key
添加后,观察程序会正确触发,但如果键是从现有值编辑的,则不会。
因此,如果我输入街道地址,key
street_address1
已添加到 customer
对象,所以观察者开火。如果我开始编辑街道地址,它就不会再触发了。
模板
<v-container>
<v-col cols="12">
<h2>Contact</h2>
<div>Email Adderss</div>
<v-text-field
outlined
v-model="customer.email"
>
</v-text-field>
</v-col>
<v-col cols="12">
<v-row>
<v-col cols="6">
<div>First</div>
<v-text-field
outlined
v-model="customer.first"
>
</v-text-field>
</v-col>
<v-col cols="6">
<div>Lasts</div>
<v-text-field
outlined
v-model="customer.last"
>
</v-text-field>
</v-col>
</v-row>
</v-col>
<v-col cols="12">
<div>Shipping Address Line 1</div>
<v-text-field
outlined
v-model="customer.street_1"
>
</v-text-field>
</v-col>
<v-col cols="12">
<div>Shipping Address Line 2</div>
<v-text-field
outlined
v-model="customer.street_2"
>
</v-text-field>
</v-col>
</v-container>
脚本 data() {
return {
customer: {}
};
},
watch: {
customer(newData) {
console.log("test", newData)
},
deep: true
},
最佳答案
这是一个语法问题。 deep
属性(property)未注册,因为它错误地位于 watch 外部,就好像它是第二 block watch 一样。
对 customer
使用对象语法 watch 。该对象应具有两个属性:
handler
方法(必须命名为“处理程序”,如 watch
docs )deep
房产 watch: {
customer: {
handler (newData) {
console.log("test", newData)
},
deep: true
}
}
它也可以有 immediate: true
属性,如果你想要 watch
在组件首次创建时运行。
关于javascript - Vue deep watch 无法处理对象属性更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66374708/