Question

我正在对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>

如您所见，页面加载时我的“ included”数组为空。我从AJAX请求中获得了数组，然后更新了数据：

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

但是v-validate似乎不承认新添加的数组。仅当我将城市硬编码到数据中时，此方法才有效。如何强制v-validate响应更新的规则？

Answer 1

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

尝试：

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

Answer 2

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

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

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

2 个答案: