强制 v-validate 更新规则（使用 Vue）答案

【问题标题】：Forcing v-validate to update rules (with Vue)强制 v-validate 更新规则（使用 Vue）
【发布时间】：2019-04-11 00:50:02
【问题描述】：

我在 Vue 中使用 v-validate。我试图弄清楚如何强制 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 响应更新的规则？

【问题讨论】：

标签： javascript arrays validation vue.js rules

【解决方案1】：

Vue.js 无法跟踪嵌套引用类型的更新。

试试：

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

【讨论】：

【解决方案2】：

使用 Vue.set 跟踪更改：https://vuejs.org/v2/guide/reactivity.html

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

【讨论】：