Как предотвратить последующие часы Vue от запуска бесконечного цикла? - PullRequest
Новая
       10

Как предотвратить последующие часы Vue от запуска бесконечного цикла?

0 голосов
/ 02 июля 2018

У меня есть объект, который выглядит так: 

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

Запустит бесконечный цикл, так как он изменяет fields.

Как решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 02 июля 2018

Я думаю, что вы смотрите объект visitorInfo. В этом случае массив изменения ошибок также будет запускать ваши часы при его изменении. Это приведет к бесконечному циклу

0 голосов
/ 02 июля 2018

Поскольку vue не может определить, изменяете ли вы элемент массива напрямую, это может помочь: 

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

Другой вариант - просто проверить, было ли уже сообщено об ошибке: 

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

Недостатком этого является то, что он по-прежнему вызывает наблюдателя ненужный второй раз.

Дайте мне знать, как это происходит.

...