如何防止下面的vue watch触发死循环？

Question

我有一个看起来像这样的对象：

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.'
})

将触发无限循环，因为它正在修改 fields。

如何解决这个问题？

Answer 1

由于 vue 无法检测您是否直接修改数组元素，这可能会有所帮助：

field.errors[field.errors.length] = {
  errorType: 'isRequired',
  message: 'This field is required.'
};

另一种选择是简单地检查是否已报告错误：

if (isRequired && !field.errors.length) { ... }

这样做的缺点是它仍然会不必要地第二次触发观察者。

让我知道进展如何。

如何防止下面的vue watch触发死循环？

How to prevent the following Vue watch from triggering an infinite loop?

javascript

infinite-loop

vue.js