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

【问题标题】：using v-model on <select> makes first option not appear in select在 <select> 上使用 v-model 会使第一个选项不出现在选择中
【发布时间】：2019-03-21 09:53:14
【问题描述】：

我的 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-model，它会像往常一样工作，选项 1 可以作为预选选项可见。我什至尝试将“名称”预设为“选择选项”。我试过使用 html5 'selected disabled' 属性。

【问题讨论】：

<option v-if="!position" value="">Select option</option>?

标签： html vue.js vue-component

【解决方案1】：

您需要使用 value 以及 disabled。
在这种情况下，v-model的初始值需要与disabled的值相匹配。

<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-model 表达式的初始值与任何选项都不匹配，则该元素将呈现为“未选择”状态。在 iOS 上，这将导致用户无法选择第一项，因为在这种情况下 iOS 不会触发更改事件。因此建议提供一个空值的 disabled 选项，如上例所示。

Documentation

【讨论】：