Vue.js下拉选择框无法显示默认选项问题求助

问题描述 #

按照Vue.js官方文档创建了三个下拉选择框，但无法将禁用的默认选项设置为初始显示，下拉框呈现空白状态。尝试移除选择框的class属性后问题仍未解决。

相关核心代码：

<div class="canvas-area">
  <!-- 循环创建多个画布 -->
  <div v-for="(page, index) in this.taleData.pages" :key="index" class="canvas-container">
     <div class="canvas-header">
      <p>第 {{ index + 1 }} 页</p>

      <select class="form-control mb-lg-1" v-model="selectedTextEffect[index]"
              @change="applyTextEffect(index + 1)">
        <option disabled value="">选择效果</option>
        <option value="normal">普通文本</option>
        <option value="glowing">发光文本</option>
      </select>
      <select class="form-control mb-lg-1" v-model="selectedFonts[index]" @change="changeFont(index + 1)">
        <option disabled value="">字体类型</option>
        <option v-for="font in fontOptions" :value="font.val" :key="font.id">
          {{ font.val }}
        </option>
      </select>

      <select class="form-control mb-lg-1" v-model="selectedFontSizes[index]"
              @change="changeFontSize(index + 1)">
        <option disabled value="">字体大小</option>
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="20">20</option>
        <option value="24">24</option>
        <option value="28">28</option>
        <option value="32">32</option>
        <option value="36">36</option>
        <option value="40">40</option>
      </select>
    <!-- ... -->
</div>

data() {
  return {
    bookDetails: null,
    textColor: '#ff9136',
    selectedFonts: {},
    selectedFontSizes: {},
    fontOptions: [
      {id: 1, val: 'Times New Roman'},
      {id: 2, val: 'Arial'},
      {id: 3, val: 'Courier New'},
    ],
    selectedTextEffect: {},
    canvasHistory: {},
  };
},
computed: {
  taleData() {
    return this.$store.getters.getTaleData;
  }
}

问题原因 #

1. 绑定变量类型错误：你用对象{}存储selectedTextEffect、selectedFonts、selectedFontSizes，但在v-for中通过索引index绑定。初始对象为空，Vue无法为不存在的索引键创建响应式属性，导致下拉框找不到匹配的初始值，只能显示空白。
2. v-model与原生属性冲突：原本第三个选择框的<option value="24" selected>设置了selected，但Vue中v-model的优先级远高于原生selected，这个设置完全无效。
3. 异步数据未及时初始化：taleData.pages是从Vuex获取的异步数据，页面渲染时数组可能还未加载，导致绑定变量无法提前匹配页面数量。

解决方案 #

1. 将绑定变量改为数组类型 #

数组更适合与v-for的索引绑定，替换data中的对象为数组：

data() {
  return {
    bookDetails: null,
    textColor: '#ff9136',
    selectedFonts: [], // 改为数组
    selectedFontSizes: [], // 改为数组
    fontOptions: [
      {id: 1, val: 'Times New Roman'},
      {id: 2, val: 'Arial'},
      {id: 3, val: 'Courier New'},
    ],
    selectedTextEffect: [], // 改为数组
    canvasHistory: {},
  };
}

2. 初始化数组匹配页面数量 #

监听taleData的变化，在数据加载完成后初始化数组，确保每个下拉框都有对应的初始值：

watch: {
  taleData(newVal) {
    if (newVal?.pages) {
      const pageCount = newVal.pages.length;
      // 前两个选择框初始值为空字符串，匹配禁用选项的value=""
      this.selectedTextEffect = Array(pageCount).fill("");
      this.selectedFonts = Array(pageCount).fill("");
      // 第三个选择框默认选中24，初始值设为"24"
      this.selectedFontSizes = Array(pageCount).fill("24");
    }
  }
},
// 页面加载时如果taleData已存在，直接初始化
created() {
  const initialData = this.$store.getters.getTaleData;
  if (initialData?.pages) {
    const pageCount = initialData.pages.length;
    this.selectedTextEffect = Array(pageCount).fill("");
    this.selectedFonts = Array(pageCount).fill("");
    this.selectedFontSizes = Array(pageCount).fill("24");
  }
}

3. 移除原生selected属性 #

完全由v-model控制选中状态，去掉option上的selected：

<option value="24">24</option>

验证效果 #

修改完成后，前两个下拉框会默认显示禁用的"选择效果"/"字体类型"选项，第三个下拉框默认选中24号字体，不会再出现空白状态。

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