element v-if 条件渲染问题

问题：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 >