Vue.js 下使用 selected 属性为 select 下拉框设置默认值不生效

问题原因 #

这不是组件或框架的Bug，属于用法不符合VeeValidate和Vue表单的设计逻辑：

1. 单选<select>的选中状态由<select>元素本身的绑定值决定，而非子<option>的selected属性控制，Vue中只要给<select>绑定了状态管理，selected属性就会被覆盖不会生效。
2. VeeValidateField组件会接管表单字段的状态，你没有给post_category字段设置初始值的前提下，组件默认会取第一个可选选项作为初始值，手动写的:selected逻辑不会生效。

解决方法 #

你可以直接删除<option>上的:selected属性，通过以下两种方式设置默认值即可：

方案1：通过表单初始值配置（推荐） #

如果你是通过useForm定义表单，直接在initialValues中给post_category字段赋值：

import { useForm } from 'vee-validate'

const { handleSubmit } = useForm({
  initialValues: {
    // 直接赋值现有文章的分类ID，无分类时默认选0（none）
    post_category: post.category.value ?? 0
  }
})

模板简化为：

<label>
  <VeeValidateField name="post_category" as="select">
    <option value="" disabled>Set to folder</option>
    <option value="0">none</option>
    <option v-for="category in categories"
      :key="category.id"
      :value="category.id"
    >
      {{ category.category_name }}
    </option>
  </VeeValidateField>
</label>

方案2：通过v-model绑定值 #

如果需要单独控制该字段，直接给VeeValidateField加v-model绑定，给绑定变量赋初始值即可：

<VeeValidateField 
  name="post_category" 
  as="select"
  v-model="selectedCategory"
>
  <!-- 内部option代码不变，无需selected属性 -->
</VeeValidateField>

JS部分：

import { ref } from 'vue'
// 初始化时赋值为已有分类ID
const selectedCategory = ref(post.category.value ?? 0)

内容的提问来源于stack exchange，提问作者r.gjoni