Vue中如何设置select组件的默认选中选项？

错误点总结 #

• 选项数组的第一个元素结构不统一：其他选项都有value和text字段，但第一个元素用了selectedOption字段，导致循环渲染时无法读取到value和text，出现空的<option>。
• selectedOption未声明为响应式变量：Vue3中v-model绑定的变量必须是响应式的（比如用ref包裹），否则无法实现双向绑定。
• 默认值与选项不匹配：你设置的默认值'Select an option'没有对应选项中的value值，导致无法选中默认选项。

修正后的代码 #

脚本部分 #

import { ref } from 'vue'

const selectedOption = ref('default') // 声明为响应式变量，默认值匹配第一个选项的value
const options = ref([
    {
      value: 'default', // 统一结构，设置唯一value
      text: 'Select an option',
    },
    {
      value: 'option1',
      text: 'Option 1',
    },
    {
      value: 'option2',
      text: 'Option 2',
    },
  ])

模板部分 #

<template>
    <select v-model="selectedOption" class="">
        <option v-for="option in options" :value="option.value">
          {{ option.text }}
        </option>
    </select>
</template>

优化方案（可选） #

如果希望默认选项是不可选的占位符，可以把它从循环中单独提出来，代码更清晰：

<template>
    <select v-model="selectedOption" class="">
        <option value="" disabled>Select an option</option>
        <option v-for="option in options" :value="option.value">
          {{ option.text }}
        </option>
    </select>
</template>

import { ref } from 'vue'

const selectedOption = ref('') // 默认值为空，匹配占位符的value
const options = ref([
    {
      value: 'option1',
      text: 'Option 1',
    },
    {
      value: 'option2',
      text: 'Option 2',
    },
  ])

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