el-select使用v-model,切换选中项,出现俩个被选中
时间: 2024-03-27 22:36:27 浏览: 15
如果 `el-select` 组件的 `v-model` 属性值与其中的 `el-option` 组件的 `value` 属性值不匹配,就会出现选中项不同步的问题。可能会出现一个 `el-option` 被选中,但同时又有另一个 `el-option` 被选中的情况。
出现这种情况的原因是,`v-model` 绑定的是选中项的值,而 `el-option` 组件的 `value` 属性值用于识别选中项。如果这两个值不一致,就会导致选中项不同步的情况。
要解决这个问题,需要确保 `v-model` 绑定的值与 `el-option` 组件的 `value` 属性值一致。例如,下面的代码就会出现选中项不同步的问题:
```
<el-select v-model="selected">
<el-option label="Option A" value="A"></el-option>
<el-option label="Option B" value="B"></el-option>
</el-select>
```
如果 `selected` 的初始值为 `"A"`,那么默认会选中 `Option A`。但是,如果将 `Option B` 的 `value` 属性值设置为 `"C"`,则选中项就会出现问题。因为此时 `v-model` 绑定的值为 `"A"`,而 `el-option` 组件的 `value` 属性值为 `"C"`,它们不同步,就会导致选中项不同步。
要解决这个问题,需要将 `v-model` 绑定的值与 `el-option` 组件的 `value` 属性值保持一致。例如:
```
<el-select v-model="selected">
<el-option label="Option A" :value="'A'"></el-option>
<el-option label="Option B" :value="'B'"></el-option>
</el-select>
```
在上面的代码中,我们将 `el-option` 组件的 `value` 属性值设置为字符串,确保它与 `selected` 绑定的值一致。这样,在切换选中项时,就不会出现两个 `el-option` 被选中的情况了。