我有一个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属性未注册，因为它错误地位于手表的外部，就好像它是第二只手表一样。
对customer手表使用对象语法。该对象应具有两个属性：
handler方法（必须被命名为“处理程序”，如在watch文档）deep物业watch: {
customer: {
handler (newData) {
console.log("test", newData)
},
deep: true
}
}
immediate: true如果您要在watch第一次创建组件时运行它，它也可以具有一个属性。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句