element v-if 条件渲染问题

最新推荐文章于 2025-06-16 16:51:21 发布

原创最新推荐文章于 2025-06-16 16:51:21 发布 · 1.6w 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个关于Vue.js中使用v-if进行条件渲染时遇到的问题及解决方案。具体问题是在元素的条件判断渲染过程中，其中一个模板的options属性无法正常显示。通过为每个条件渲染的元素添加唯一的key属性，解决了这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：element 条件判断渲染哪一个模板，结果其中有一个模板中的options属性一直渲染不上去

<el-form-item :label="$t('soft.classify')"
                        prop="CategoryIds">
            <el-cascader v-if="softNewType == 1"
                         clearable
                         filterable
                         :show-all-levels="true"
                         :change-on-select="true"
                         v-model="editSoftTreeRuleForm.CategoryIds"
                         :options="softClass"
                         >
            </el-cascader>
            <el-cascader v-if="softNewType == 0"
                         clearable
                         filterable
                         :show-all-levels="true"
                         :change-on-select="true"
                         :props="softClassListProps"
                         :options="softClassList"
                         v-model="editSoftTreeRuleForm.CategoryIds"
                         ></el-cascader>
          </el-form-item>

解决方法：

在每一个要渲染的标签中添加一个key

让vue为他们独立渲染

vue的文档写的非常的清楚

https://cn.vuejs.org/v2/guide/conditional.html

<el-form-item :label="$t('soft.classify')"
                        prop="CategoryIds">
            <el-cascader v-if="softNewType == 1"
                         clearable
                         filterable
                         :show-all-levels="true"
                         :change-on-select="true"
                         v-model="editSoftTreeRuleForm.CategoryIds"
                         :options="softClass"
                         key="username-input"
                         >
            </el-cascader>
            <el-cascader v-if="softNewType == 0"
                         clearable
                         filterable
                         :show-all-levels="true"
                         :change-on-select="true"
                         :props="softClassListProps"
                         :options="softClassList"
                         v-model="editSoftTreeRuleForm.CategoryIds"
                         key="email-input"
                         ></el-cascader>
          </el-form-item>