vue select重新赋值选中之后不显示 怎么办
时间: 2023-08-10 08:03:18 浏览: 964
如果重新赋值 select 后选中的值没有显示,可能是因为 select 组件的 v-model 没有更新。你可以通过以下方法解决:
1. 确保重新赋值的值在 select 的 options 中存在,否则选中不会生效。
2. 在重新赋值后手动更新 v-model 的值,例如:
```
<select v-model="selected">
<option v-for="item in options" :value="item.value">{{ item.label }}</option>
</select>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
],
selected: '1'
}
},
methods: {
changeSelectedValue() {
// 重新赋值
this.selected = '2';
// 手动更新 v-model 的值
this.$nextTick(() => {
this.$refs.select.value = this.selected;
});
}
}
}
</script>
```
这里使用了 `$nextTick` 方法确保 DOM 已经更新后再更新 v-model 的值。
3. 使用 `v-if` 条件渲染 select 组件,每次重新赋值都重新渲染,例如:
```
<template>
<div>
<select v-if="renderSelect" v-model="selected">
<option v-for="item in options" :value="item.value">{{ item.label }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
],
selected: '1',
renderSelect: true
}
},
methods: {
changeSelectedValue() {
// 重新赋值
this.selected = '2';
// 重新渲染 select 组件
this.renderSelect = false;
this.$nextTick(() => {
this.renderSelect = true;
});
}
}
}
</script>
```
每次重新渲染时都会更新 v-model 的值。