Vue.js：通过“选择”将 html <option> 标签设置为默认值不起作用答案

【问题标题】：Vue.js: setting html <option> tag to default via "selected" doesn't workVue.js：通过“选择”将 html <option> 标签设置为默认值不起作用
【发布时间】：2020-04-22 11:14:39
【问题描述】：

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

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

所以我将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')
    }
  }
})

【问题讨论】：

标签： javascript html vue.js v-model select-options

【解决方案1】：

<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" },
    ]
  },

【讨论】：

【解决方案2】：

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

【讨论】：