VueJS中如何为select下拉列表设置默认选中选项

你给选项对象加selected属性不生效的核心原因是：你的cs-dashboard-select组件通过v-model="selectedValue"做了双向绑定，这类组件的选中状态完全由绑定的selectedValue变量值决定，不会读取选项配置上的selected字段，所以这个写法不会生效。

正确实现步骤 #

你不需要修改下拉选项的配置数组，只需要给v-model绑定的变量设置对应初始值即可：

• 找到组件中定义selectedValue的位置，将它的初始值设置为你要默认选中的选项的value值即可，也就是字符串'1'

不同写法的代码示例 #

Vue2 选项式API

export default {
  data() {
    return {
      // 初始值直接设为目标选项的value，注意保持类型一致，这里是字符串'1'不是数字1
      selectedValue: '1',
      // 你原有的其他数据保持不变
      rules: {
        schedule_type: []
      },
      identifier: ''
    }
  }
}

Vue3 组合式API

import { ref } from 'vue'
// 初始化ref时直接传入默认值
const selectedValue = ref('1')

注意：赋值时一定要保证数据类型和选项里的value类型完全匹配，你的选项里value写的是字符串格式的'1'，如果初始值传数字类型的1，会因为类型不匹配导致默认选中失效。

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