vue.js 中的选择选项始终是预先选择的

Question

我在 vue.js 中的选择字段有一个奇怪的行为。

我想要什么：一个没有选择任何选项的选择字段。在纯 html 中这是没有问题的。这是 jsfiddle 链接：https://jsfiddle.net/odsf3awr/

 <select id="test" size="5" name="test" >

    <option value="1">One</option>

    <option value="2">Two</option>

    <option value="3">Three</option>

    <option value="4">Four</option>

    <option value="5">Five</option>

  </select>

但 vue.s 中的相同代码正在预选择第一个选项。jsfiddle 示例： https: //jsfiddle.net/q10esdgw/

 <select id="test" size="5" name="test" >

    <option value="1">One</option>

    <option value="2">Two</option>

    <option value="3">Three</option>

    <option value="4">Four</option>

    <option value="5">Five</option>

  </select>

解决方案可能是添加一个隐藏选项，如下所示：

<option hidden disabled selected value>select an option</option>

但我想在 vue.js 中把它清理干净

Answer 1

使用 Vue 的v-model 绑定，以便您可以在 JS 中指定您的首选项：new Vue({  el: "#app",  data: {    selected: ''  }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">  <select id="test" size="5" name="test" v-model="selected">    <option value="1">One</option>    <option value="2">Two</option>    <option value="3">Three</option>    <option value="4">Four</option>    <option value="5">Five</option>  </select></div>