Vue 3.4.21：动态填充select时默认选项无法选中的问题求助

在Vue 3中，用v-model绑定下拉框时，原生的selected属性会被Vue的响应式状态覆盖，所以直接给选项加selected是无效的。要实现默认选中第一个选项，按以下方式调整即可：

• 给默认选项设置明确的value（比如空字符串或null）
• 将绑定的selectedService初始值设为这个value

修改后的代码示例 #

<select id="service" v-model="selectedService">
  <!-- 给默认选项绑定value，与selectedService初始值对应 -->
  <option :value="''">Select a Service</option>
  <option v-for="(item, index) in services" :value="item.id" :key="index">
    {{ item.name }}
  </option>
</select>

初始化响应式变量 #

根据你用的API风格，初始化绑定变量：

// Options API 写法
export default {
  data() {
    return {
      selectedService: '', // 和默认选项的value保持一致
      services: [] // 存储API返回的服务列表
    }
  },
  // ... 调用API填充services的逻辑
}

// Composition API（<script setup>）写法
import { ref } from 'vue'
const selectedService = ref('')
const services = ref([])
// ... 调用API填充services的逻辑

原理说明 #

Vue的v-model会根据绑定变量的值自动匹配对应选项，只要变量初始值和默认选项的value一致，页面渲染后就会自动选中该选项，后续API填充数据也不会覆盖这个默认选中状态（除非你主动修改selectedService的值）。如果不需要业务意义的默认值，也可以用null作为选项value，同时把selectedService初始值设为null。

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