在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将显示这个空选项

vue v-model回显el-select时v-for list里没当前v-model的值显示空

原文地址: https://www.cveoy.top/t/topic/hYRO 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录