1

我想将可用<option>标签之一设置为默认值。在<select>我使用的标签上v-model，我知道vue.js文档对此有以下说明：

v-model将忽略selected在任何表单元素上找到的 ... 属性。它将始终将 Vue 实例数据视为事实来源。您应该在组件的 data 选项内声明 JavaScript 端的初始值。

因此，我将selected属性与 v-bind 一起使用，并直接传递true给它或通过数据选项中的变量传递。不幸的是，它不起作用。这是一个jsfiddle。

这是示例代码：

HTML

<div id="app">
  <select v-model="selectedData" @change="doSomething">
    <option :selected="true" value="">
      Please select account
    </option>
    <option 
      v-for="data in myData"
      :key="data.id"
      :value="data.val"
    >
      {{ data.val }} 
    </option>
  </select>
{{ selectedData }}
</div>

JavaScript

new Vue({
  el: "#app",
  data: {
    selected: true,
    selectedData: null,
    myData: [
      { id: 1, val: "abc" },
      { id: 2, val: "def" },
      { id: 3, val: "ghi" },
      { id: 4, val: "jkl" },
    ]
  },
  methods: {
    doSomething: function(){
        console.log('hello')
    }
  }
})
4

2 回答 2

2

标签的<select>模型实际上是驱动下拉列表中所选项目的原因。

<select v-model="selectedData" @change="doSomething">

将您的“默认”选项更改为以下

    <option value="-1">
      Please select account
    </option>

并在您的数据对象中，而不是null在初始化时分配给您选择的值，而是将其设置为 -1

data: {
    selectedData: -1,
    myData: [
      { id: 1, val: "abc" },
      { id: 2, val: "def" },
      { id: 3, val: "ghi" },
      { id: 4, val: "jkl" },
    ]
  },
于 2020-01-03T22:45:53.067 回答
0

您需要设置与绑定的属性的初始值v-model，所以selectedData: ''（而不是null）。我不确定我是否遗漏了其他东西，但这就是我一直这样做的方式。

于 2020-01-03T22:46:10.177 回答