Vuetify v-combobox 验证不起作用答案

【问题标题】：Vuetify v-combobox validations not workingVuetify v-combobox 验证不起作用
【发布时间】：2020-02-06 18:38:37
【问题描述】：

我有一个 Vuetify(v. 1.9.0) v-combobox 验证至少应该从菜单中选择一项。由于某种原因，验证未触发，控制台中也没有错误。

<v-combobox
  multiple
  item-text="name"
  item-value="id"
  :items="items"
  :rules="[rules.required]"
></v-combobox>

<script>
  export default {
     data: () => ({
       rules: {
         required: value =>
           !!value || "Required."
       }
     })
  }
</script>

我错过了什么？

【问题讨论】：

您也应该提供项目数据，因为也可能存在问题。例如id:0 将被视为false。但是@Gabriel Willemann 已经确定它是 method: {} 而不是 rules: {} - 接受他的回答真是太好了，因为他真的很想帮助你。

标签： validation vue.js vuejs2 combobox vuetify.js

【解决方案1】：

试试这个例子：

<template>
  <v-app>
    <v-content>
      <v-form ref="form">
        <div>
          <v-combobox
            multiple
            item-text="name"
            item-value="id"
            :items="items"
            :rules="[required]"
            v-model="selected"
          />
          selected = {{ selected }}
        </div>
        <div>
          <v-btn @click="$refs.form.validate()">Validate</v-btn>
        </div>
      </v-form>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    selected: null,
    items: [
      { id: 1, name: 'Option 1' },
      { id: 2, name: 'Option 2' },
      { id: 3, name: 'Option 3' },
    ],
  }),
  methods: {
    required(value) {
      if (value instanceof Array && value.length == 0) {
        return 'Required.';
      }
      return !!value || 'Required.';
    },
  },
};
</script>

【讨论】：

这个答案解决了你的问题吗？请接受此答案，这将对其他人有所帮助。