element v-if 条件渲染问题

element

A Vue.js 2.0 UI Toolkit for Web

项目地址：https://gitcode.com/gh_mirrors/eleme/element

免费下载资源

快乐的大羊

16913人浏览 · 2018-05-12 22:52:52

快乐的大羊 · 2018-05-12 22:52:52 发布

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

GitHub 加速计划 / eleme / element

下载

A Vue.js 2.0 UI Toolkit for Web

最近提交(Master分支：2 个月前 )

c345bb45 1 年前

a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐