Vuetify 如何动态添加/删除规则答案

【问题标题】：Vuetify how to add/remove rule dynamicallyVuetify 如何动态添加/删除规则
【发布时间】：2019-04-18 15:18:29
【问题描述】：

我正在使用 vuetify 验证，并且我有三个日期字段：Month、From、To。我需要根据以下添加所需的规则：

如果选择 Month - From 和 To 不需要。
如果选择了 From 或 To 中的任何一个 - Month 不需要。

我尝试了 computed() 方法，检查 From 或 To 是否为空，但似乎 :rules 设置了一次，然后就没有改变。

computed: {
    monthRules() {
      return this.searchForm.from ? [] : [factory.required()];
    },

这里有一些代码

<date-field
  ref="month"
  v-model="searchForm.month"
  :rules="monthRules"
>
</date-field>

<date-field
  ref="from"
  v-model="searchForm.from"
  @input="validateTo"
  :rules="fromRules"
>
</date-field>
    
<date-field
  ref="to"
  v-model="searchForm.to"
  :rules="toRules"
>
</date-field>

monthRules: [factory.required()],
fromRules: [],
toRules: [
  *some rules from factory here*
],

工厂

required() {
    return v => !!v || 'Field is required';
},

是否可以动态构建规则数组？或者有没有更好的方法

【问题讨论】：

最简单的解决方案是在渲染期间使用 if-else 检查..

标签： vue.js vuetify.js

【解决方案1】：

我对 Vuetify 规则不是很清楚，因为我认为最好使用像 vee-validate 这样的专门库，它已经有大量预定义的规则，例如。至于动态规则，最好的方法是使用这样的对象绑定：

:rules="{
  required: requiredBool
 }"

requireBool 是您的计算属性。同样，正如我所说，我对 Vuetify rules 不是很熟悉，但这就像 Vee-Validate 的魅力。

【讨论】：