在<select>上使用v模型时，第一个选项不会出现在select中
在<select>上使用v模型时，第一个选项不会出现在select中
提问于 2018-10-17 03:22:11
我的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将该值发送到数据变量'name‘(将用于其他事情)。
但是，视觉上，选择框是空白的，直到我打开它并选择一个选项。如果我移除v-model，它会像往常一样工作，选项1作为预先选择的选项可见。我甚至尝试过将“name”预置为“Select Option”。我尝试过使用html5的“selected disabled”属性。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-17 03:30:07
您需要使用value以及禁用的。
在这种情况下，v-model的初始值需要匹配禁用的v-model的值。
<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不会触发更改事件。因此，建议提供一个值为空的disabled选项，如上面的示例所示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52842664
复制相关文章
相似问题
腾讯云开发者
