Vue-select组件required属性未按预期生效问题求助

Vue-select 属于自定义组件，原生表单的 required 属性及部分框架默认校验规则无法直接生效，以下是几种可行的解决方案：

1. 自定义提交校验逻辑 #

在表单提交时手动检查绑定变量是否有值，无值则触发错误提示并阻断提交流程：

实现示例： #

<template>
  <div>
    <v-select 
      label="name"
      :close-on-select="true"
      v-model="CurrentAssignment"
      @input="onSelection; selectError = false"
      :reduce="app => app.id"
      placeholder="Select"
      :options="EligibleOptions" 
      :clearable="false"
      :class="{ 'error-border': selectError }"
    >
    </v-select>
    <span v-if="selectError" class="error-text">请选择选项</span>
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      CurrentAssignment: null,
      EligibleOptions: [],
      selectError: false
    }
  },
  methods: {
    onSelection() {
      // 你的选择回调逻辑
    },
    submitForm() {
      // 校验是否已选择选项
      if (!this.CurrentAssignment) {
        this.selectError = true;
        return;
      }
      // 执行正常提交逻辑
      console.log('提交数据:', this.CurrentAssignment);
    }
  }
}
</script>

<style scoped>
.error-border {
  border-color: #ff4d4f !important;
}
.error-text {
  color: #ff4d4f;
  font-size: 0.875rem;
  margin-top: 4px;
  display: block;
}
</style>

2. 结合表单校验库（如 VeeValidate） #

如果项目已使用表单校验库，可直接为 Vue-select 绑定校验规则，借助库的能力完成校验：

Vue3 + VeeValidate 4 示例： #

<script setup>
import { useForm, useField, defineRule } from 'vee-validate';
import { required } from '@vee-validate/rules';

// 注册必填校验规则
defineRule('required', required);

const { handleSubmit } = useForm();
// 绑定字段并设置校验规则
const { value: CurrentAssignment, errorMessage } = useField('assignment', 'required');

const onSelection = () => {
  // 你的选择回调逻辑
};

const onSubmit = handleSubmit((values) => {
  console.log('提交数据:', values);
});
</script>

<template>
  <form @submit="onSubmit">
    <v-select 
      label="name"
      :close-on-select="true"
      v-model="CurrentAssignment"
      @input="onSelection"
      :reduce="app => app.id"
      placeholder="Select"
      :options="EligibleOptions" 
      :clearable="false"
    >
    </v-select>
    <span v-if="errorMessage" class="error-text">{{ errorMessage }}</span>
    <button type="submit">提交</button>
  </form>
</template>

<style scoped>
.error-text {
  color: #ff4d4f;
  font-size: 0.875rem;
  margin-top: 4px;
  display: block;
}
</style>

3. 利用 Vue-select 内置的 invalid 属性（部分版本支持） #

部分 Vue-select 版本提供了 invalid 属性，可通过该属性控制组件的错误状态，配合自定义校验逻辑使用：

<v-select 
  label="name"
  :close-on-select="true"
  v-model="CurrentAssignment"
  @input="onSelection"
  :reduce="app => app.id"
  placeholder="Select"
  :options="EligibleOptions" 
  :clearable="false"
  :invalid="selectError"
>
</v-select>

设置 :invalid="selectError" 后，组件会自动应用内置错误样式，无需额外编写CSS。

内容的提问来源于stack exchange，提问作者Sachin