Принудительное v-validate для обновления правил (с помощью Vue)

Question

Я использую v-validate с Vue. Я пытаюсь выяснить, как заставить v-validate обновить правила. Например, у меня есть что-то вроде этого:

<template>
  <div v-for="field in fields">
    <input :name="field.name" v-validate="field.rules">
  </div>
</template>
<script>
  export default {
    data() {
      fields: [
        {
          name: "city",
          rules: {
            included: []
          }
        }
      ]
    }
  }
</script>

Как видите, мой «включенный» массив пуст при загрузке страницы. Я получаю массив из запроса AJAX, а затем обновляю свои данные:

this.fields[0].rules.included = cities

Но v-validate, похоже, не подтверждает добавленный массив. Это работает, только если я жестко закодирую города в своих данных. Как заставить v-validate ответить на обновленные правила?

Answer 1

Используйте Vue.set для отслеживания изменений: https://vuejs.org/v2/guide/reactivity.html

Vue.set(this.fields[0], 'rules', cities);

Answer 2

Vue.js не может отслеживать обновления вложенных ссылочных типов.

Попытка:

let fields = [...this.fields]
fields[0].rules = cities
this.fields = fields