在<select>上使用v-model使第一个选项不出现在select中

Question

我的HTML：

<select id='select-id' v-model='position'>
    <option>Opt 1</option>
    <option>Opt 1</option>
</select>

Vue组件：

var app = new Vue({
    el: '#elementid',
    data: {
        name: '',
        position: 'Select Option',
    },
});

当他们选择一个选项时，我正在使用v-model将该值发送到数据变量“名称”（将用于其他用途）。

但是，在外观上，选择框是空白的，直到我打开它并选择一个选项。如果删除了v模型，它可以像往常一样工作，并且可以将选项1作为预选选项。我什至尝试将“名称”预设为“选择选项”。我尝试使用html5“选定的已禁用”属性。

Answer 1

您需要使用值以及禁用值。
在这种情况下，v模型的初始值必须与禁用模型的值匹配。

<div id="app">
  <select id='select-id' v-model='position'>
    <option disabled value="">Select option</option>
    <option>Opt 1</option>
    <option>Opt 1</option>
  </select>
</div>

var app = new Vue({
  el: '#app',
  data: {
    position: '',
  },
});

如果v模型表达式的初始值与任何选项都不匹配，则该元素将呈“未选中”状态。在iOS上，这将导致用户无法选择第一项，因为在这种情况下，iOS不会触发更改事件。因此，建议如上例所示，为禁用选项提供空值。

文献资料