Vue中添加v-model后select默认提示文本消失的问题求助

问题根源与修复步骤 #

• 变量名不匹配：你在data中定义的是selections，但v-model绑定的是selection，变量名不一致导致Vue无法正确关联初始值，默认提示无法显示。
• 默认选项value设置错误：默认提示的option需要将value设为空字符串""，这样当v-model绑定的变量初始值为空时，会自动匹配这个禁用的选项，展示提示文本。
• 缺失数据与变量错误：代码中未定义todos数组，且v-for里的:value="a"是未声明的变量，需补充数据并修正绑定。

修正后的完整代码 #

JavaScript

new Vue({
  el: "#app",
  data: {
    selection: "", // 修正变量名，初始值设为空字符串
    todos: [ // 补充示例数据
      { name: "区域A" },
      { name: "区域B" },
      { name: "区域C" }
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <select id="test" class="form-control" v-model="selection" style="width: 110px;">
    <option value="" selected disabled>Choose an area:</option>
    <option v-for="t in todos" :value="t.name">{{ t.name }}</option>
  </select>
</div>

原理说明 #

当v-model绑定的变量初始值为空字符串时，会自动匹配value=""的option。这个选项设置为disabled后，用户无法选中它，仅作为提示文本展示，同时Vue能正常跟踪后续用户选择的变化。

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