Vue select下拉框默认禁用选中的占位选项不显示如何解决

问题根源 #

你使用了Vue的v-model双向绑定select组件的值，原生HTML的selected属性在该场景下优先级低于v-model绑定的变量值，因此不会生效。
你的占位<option>的value为空字符串，只要你组件初始化时selectedTitle的初始值未设置为空字符串，就无法匹配到该占位选项，就会出现默认显示为空的异常。

修复方案 #

1. 调整Vue变量初始值 #

将selectedTitle的初始值设置为空字符串，保证初始化时能匹配到占位选项：

// Vue2 示例
export default {
  data() {
    return {
      selectedTitle: '', // 必须初始化为空字符串
      allTitles: [] // 从数据库拉取的选项列表
    }
  }
}

2. 补充占位文本灰化样式 #

给select增加required属性，配合CSS实现未选择有效选项时文本灰化的效果：

<label for="TitleSelector">
  What do you want to edit?
</label>
<select 
  name="TitleSelector" 
  id="TitleSelector" 
  v-model="selectedTitle"
  required
>
  <option value="" disabled>Choose A Title</option>
  <option
    v-for="(title, index) in allTitles"
    :value="title"
    :key="index"
  >
    {{ title }}
  </option>
</select>

对应CSS样式：

/* 未选中有效选项时文本显示为灰色 */
select:invalid {
  color: #999;
}
/* 可选选项文本为黑色 */
select option {
  color: #000;
}

补充说明 #

原来的代码中给占位option加的selected属性可以直接删掉，在v-model绑定的场景下该属性不会生效，由绑定变量的初始值决定默认选中项。

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