我有一个看起来像这样的对象:
visitorInfo: {
name: {
name: 'Name',
value: '',
isInvalid: false,
errors: []
},
email: {
name: 'Email address',
value: '',
validation: {
isRequired: true
},
errors: []
},
phone: {
name: 'Phone number',
value: '',
errors: []
}
},
我正在使用 watch 在 fields
的 value
发生变化时添加错误消息(例如,当用户在表单中输入时):
fields: {
handler (fields) {
Object.entries(fields).forEach(([key, value]) => {
const field = fields[key]
const isRequired = field.validation.isRequired && field.value
if (isRequired) {
field.errors.push({
errorType: 'isRequired',
message: 'This field is required.'
})
}
})
},
deep: true
}
但是如您所见,存在一个问题。这点
field.errors.push({
errorType: 'isRequired',
message: 'This field is required.'
})
将触发无限循环,因为它正在修改字段
。
如何解决这个问题?
最佳答案
由于 vue 无法检测您是否直接修改数组元素,这可能会有所帮助:
field.errors[field.errors.length] = {
errorType: 'isRequired',
message: 'This field is required.'
};
另一种选择是简单地检查是否已报告错误:
if (isRequired && !field.errors.length) { ... }
这样做的缺点是它仍然会触发观察者不必要的第二次。
告诉我进展如何。
关于javascript - 如何防止下面的vue watch触发死循环?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51130375/