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>

EDIT2： 如果删除v-model="newSelectedUnit"，则说明已正确设置了所选值！但是为什么呢？

Answer 1

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

现在，v-model上的<select>将尝试根据newSelectedUnit中的值选择单位

如果v模型表达式的初始值与任何选项都不匹配，则该元素将呈“未选中”状态。

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

Answer 2

如果您使用的是物化CSS模板，则使用

select { display:none }

添加默认应用程序CSS

select: { display: block }

它将再次出现！

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

2 个答案: