Vue如何根据主Select选中项控制组件显隐并解决重复生成问题

问题原因 #

• 模板中布尔值判断错误使用大写True，JS原生布尔值为小写true，大写True会被识别为未定义变量，导致判断逻辑异常，触发不必要的重复渲染
• v-if切换的动态元素未指定唯一key，Vue虚拟DOM diff时可能出现节点复用异常，导致Select组件重复初始化
• 额外声明connectedUnit响应式变量+change事件赋值的逻辑冗余，多余的响应式更新也可能带来重复渲染问题
• 若你使用的是第三方v-select组件，在原生<select>标签上绑定v-select指令也可能引发组件重复初始化的冲突

修复方案 #

方案1（推荐，避免组件重复创建） #

直接用v-show替代v-if，仅通过CSS控制显隐，组件只会初始化一次，同时删除冗余逻辑：

1. 动态渲染部分修改为：

<select 
  v-select 
  class="form-control" 
  v-model="form.linkedDepartment" 
  v-show="form.institutionType === 1"
  key="department-select"
>
  <option :value="null">Choose One</option>
  <option 
    :value="item.id"
    v-for="(item,index) in linkedDepartments" 
    :key="index"
  >
    {{ item.Text}}
  </option>
</select>

<input 
  type="number" 
  class="form-control" 
  v-model="form.dossierNo" 
  v-show="form.institutionType !== 1"
  key="dossier-input"
>

2. 直接删除整个change函数，以及data中声明的connectedUnit变量即可，不需要额外监听事件做状态同步，逻辑更简洁。

方案2（保留v-if的修改方式） #

如果必须使用v-if销毁重建元素，修改模板判断逻辑即可：

<select 
  v-select 
  class="form-control" 
  v-model="form.linkedDepartment" 
  v-if="connectedUnit"
  key="department-select"
>
<!-- 选项代码不变 -->
</select>

<input 
  type="number" 
  class="form-control" 
  v-model="form.dossierNo" 
  v-if="!connectedUnit"
  key="dossier-input"
>

布尔值变量做判断不需要额外加=== true的对比，直接写变量本身即可。

内容的提问来源于stack exchange，提问作者AliCa