代码之家 › 专栏 › 技术社区 › alex

如何防止以下Vue Watch触发无限循环?

infinite-loop vue.js javascript

4

alex · 技术社区 · 7 年前

visitorInfo: {
  name: {
    name: 'Name',
    value: '',
    isInvalid: false,
    errors: []
  },
  email: {
    name: 'Email address',
    value: '',
    validation: {
      isRequired: true
    },
    errors: []
  },
  phone: {
    name: 'Phone number',
    value: '',
    errors: []
  }
},

我在用 value 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.'
})

会触发一个无休止的LOP,因为它正在修改

如何解决这个问题?

2 回复 | 直到 7 年前

1

connexo 7 年前

由于Vue无法检测是否直接修改数组元素,因此这可能有助于:

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

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

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

2

-2

jacky 7 年前

我认为您正在监视visitorinfo对象,在这种情况下,修改错误数组也会在它更改时触发您的监视,这将导致无限循环。