时间戳

首页 > 解决方案 > 如何在 Vue.js 中使用 vuelidate 验证 vSelect

vue.js - 如何在 Vue.js 中使用 vuelidate 验证 vSelect

问题描述

我在计算中有行业错误（）函数。我的 vuelidate 验证非常适合 v-text-field 和 v-textarea。它仅不适用于 v-select .. 当提交为空时不显示错误。 

<v-select 
    v-model="industry"
    items="industryList"
    item-text="name"
    item-value="val"
    :error-messages="industryErrors"
    label="Industry"
    :reduce="name => name.val"
    @input="$v.industry.$touch()"
    @blur="$v.industry.$touch()"
    required
    >
</v-select>

标签： vue.js

解决方案

我知道现在为时已晚，但如果它对某人有帮助，它对我有用：

import { maxLength, minLength, required } from 'vuelidate/lib/validators'

export default {
  name: 'ServiceCar',
  validations: {
    editedItem: {
      category: { required }
    }
  },
  data: () => ({
    editedItem: {},
    categories: ['cat1', 'cat2', 'cat3']
  }),
  computed: {
    categoryErrors () {
      if (!this.$v.editedItem.category.required &&  this.$v.editedItem.category.$dirty) {
        return 'This field is required'
      } else return []
    }
  }
}
<v-select
  v-model="editedItem.category"
  required
  :items="categories"
  prepend-icon="mdi-car-multiple"
  :error-messages="categoryErrors"
  solo
  @click="$v.editedItem.category.$touch()"
>
  <template #label>
     Category 
    <span class="red--text"><strong> *</strong></span>
  </template>
</v-select>

实施后的最终结果

推荐阅读