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

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

  •  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
  •  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对象,在这种情况下,修改错误数组也会在它更改时触发您的监视,这将导致无限循环。