默认选定值在 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 ”，但不能同时使用两者。

\n

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

\n

\n

如果 v-model 表达式的初始值与任何选项都不匹配，则该元素将以 \xe2\x80\x9cunselected\xe2\x80\x9d 状态呈现。

\n

\n

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

\n