Question

我有计算中的industryErrors（）函数。我的veleidate验证非常适合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>

Answer 1

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

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>

Final result after the implementation

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

1 个答案: