在 <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 将该值发送到数据变量“name”（将用于其他事情）。

但是，从视觉上看，选择框是空白的，直到我打开它并选择一个选项。如果我删除 v-model，它会像往常一样工作，选项 1 会作为预选选项可见。我什至尝试将“名称”预设为“选择选项”。我尝试过使用 html5“选定禁用”属性。

Answer 1

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

文档

Answer 2

将select的第一个选项的值设置为与变量的默认值相同。

<script>
    export default {
        setup() {
            const filter = ref('');

            return {
                filter,
            }
        }
     }
</script>

<select v-model="filter">
 <option disabled value=''>Filter</option>
 <option>option</option>
 <option>option</option>
 <option>option</option>
</select>