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 在value的{{1}}更改时（例如，用户输入表单时）添加错误消息：

fields

但是您可以看到有问题。这一点

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.' })，因此会触发无休止的抽奖。

如何解决此问题？

Answer 1

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

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

另一种选择是仅检查是否已报告错误：

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

其缺点是它仍然会不必要地第二次触发观看者。

让我知道怎么回事。

Answer 2

我认为您正在观看visitorInfo对象，在这种情况下，错误数组的修改也会在手表更改时触发您的手表，这将导致无限循环

如何防止以下Vue手表触发无限循环？

2 个答案: