Vuetify 表单控件：带有 CHIPS 的 SELECT 存在验证问题答案

【问题标题】：Veutify form control: SELECT with CHIPS having issue with validationVuetify 表单控件：带有 CHIPS 的 SELECT 存在验证问题
【发布时间】：2020-07-18 21:44:59
【问题描述】：

我正在尝试对具有全选模板并使用芯片的 select 使用 vuetify 验证...设置 :rules="[v => !!v || 'Item is required']" 并且 required 似乎不起作用..建议或阅读链接？ CODE PEN EXAMPLE

<v-select v-model="value" :items="items"
  attach
  chips
  label="Chips"
  multiple
  :rules="[v => !!v || 'Item is required']"
  required
></v-select>

items: ["foo", "bar", "fizz", "buzz"],
  value: ["foo", "bar", "fizz", "buzz"],

【问题讨论】：

标签： vuetify.js

【解决方案1】：

我会在数据中而不是在每个v-select 上定义您的规则，这样您就可以在一个地方轻松地调整您的规则。你也有一个错字，你的methods 被称为methodds。请记住在浏览器的开发控制台 (F12) 中检查是否有任何错误。 v-select 有一个名为“select”的 v-model，但它从未在数据中定义。

以下设置应该可以正常工作。

<v-select v-model="select" :items="items" :rules="required" label="Item Validates just fine">
</v-select>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    valid: true,
    items: ['','foo', 'bar', 'fizz', 'buzz'],
    value: [],
    select: [],
    required: [(v) => v.length > 0 || "required"]
  }),
  methods:{
    validate(){
           this.$refs.form.validate();
    }
  }
})

您之前使用 !!v 的规则不适用于数组。
!![] 计算结果为 true
但 [].length > 0 的计算结果为 false

【讨论】：

那么直截了当，非常感谢您的回答！我还用你建议的修复更新了我的代码笔。

【解决方案2】：

由于您已经向 v-model 添加了值，因此验证规则将始终返回 true。您需要将 value 初始化为空数组

data(){
  return {
    ...
    value: [],
    items: ["foo", "bar", "fizz", "buzz"]
  }
}

【讨论】：

试过了，并添加了一个带有两个选择的 CODE PEN.. 来演示这个问题。
我知道你需要的是，当两个 v-select 都不为空时，按钮应该是活动的，对吧？
您需要在两个 v-select 上将规则更改为 :rules="[v => v.length > 0 || 'Item is required']"