时间戳

首页 > 解决方案 > 选择选项总是在 vue.js 中被预选

javascript - 选择选项总是在 vue.js 中被预选

问题描述

我对 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/

new Vue({
  el: "#app",
})
<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" >
    <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>

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

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

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

标签： javascripthtmlvue.js

解决方案

使用 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>

推荐阅读