默认选择值在 Vue.js 中不起作用

Question

我正在尝试为我的下拉列表设置默认选择值。我的代码如下所示：

        <select v-model="newSelectedUnit" @change="selectUnit(newSelectedUnit)" class="custom-select">
          <option v-for="unit in units" :key="unit.id" :value="unit.id" :selected="unit.id == Selectedunit.id">{{ unit.name }}</option>
        </select>

但没有默认选择值。我已经尝试将 Selectedunit.id 硬编码为 32712（这是单元的 ID 之一）：

            <select v-model="newSelectedUnit" @change="selectUnit(newSelectedUnit)" class="custom-select">
              <option  v-for="unit in units" :key="unit.id" :value="unit.id" :selected="unit.id == 32712">{{ unit.name }}</option>
            </select>

在 Chrome 检查器中有一个 <option> 标签，其值为 32712:

<option value="32712">CYLINDER</option>

但默认未选中。

编辑： 我注意到 selected 属性有问题。在上面的示例中，如果我设置了另一个属性：:selectedXXX="unit.id == 32712" 我在 Chrome 开发工具中得到了预期的属性：

<option selectedXXX="true" value="32712">CYLINDER</option>

编辑2： 如果我删除 v-model="newSelectedUnit" 我已经正确设置了所选值！但是为什么？

Answer 1

使用“@change 和 :selected”或“v-model”，但不能同时使用。

现在 <select> 上的 v-model 将尝试 select 基于 newSelectedUnit

中的值的单位

If the initial value of your v-model expression does not match any of the options, the element will render in an “unselected” state.

https://vuejs.org/v2/guide/forms.html#Select

Answer 2

如果您使用的是 materialize css 模板，它带有一个

select { display:none }

添加您的默认应用程序 css

select: { display: block }

它会再次出现！

默认选择值在 Vue.js 中不起作用

Default selected value not working in Vue.js

javascript

vue.js

vuejs2