vue v-model回显el-select时v-for list里没当前v-model的值显示空
在Vue中,当使用v-model指令对el-select进行双向绑定时,如果v-model的值在v-for循环列表中不存在,则el-select将不会显示任何值。
为了解决这个问题,你可以添加一个默认的选项,以便在v-for循环列表中没有匹配到v-model的值时显示空。例如,你可以添加一个空的选项,其value值为空字符串或null,然后将该选项作为列表的第一项。这样,在v-for循环列表中没有匹配到v-model的值时,el-select将显示这个空的选项。
示例代码如下:
<template>
<el-select v-model="selectedValue">
<el-option :value="null" label="请选择"></el-option>
<el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]
};
}
};
</script>
在上面的示例中,我们添加了一个value为null的空选项,并将其作为列表的第一项。当v-model的值不在v-for循环列表中时,el-select将显示这个空选项
原文地址: https://www.cveoy.top/t/topic/hYRO 著作权归作者所有。请勿转载和采集!