如何刷新v-if语句中的内容？下拉切换时重置v-if区块内输入值

问题原因 #

你碰到的v-if区域没有自动重置的核心原因是：v-if只有在条件的布尔值从true变为false，再从false变回true时，才会触发内部DOM/组件的销毁和重建。如果你只是在多个真值（比如数字1/2、非空字符串、对象）之间切换value，v-if="value"的判断结果一直是true，自然不会触发重建，内部的输入状态、变量值都会保留。

实现方案 #

这个需求完全可以实现，最简便的是以下两种方案：

方案1：加key属性强制重建（推荐） #

利用Vue的虚拟DOM diff规则：只要元素的key值发生变化，Vue就会销毁旧元素，重新渲染全新的元素实例，内部所有状态都会自动重置。你只需要给v-if绑定的div加一个和value关联的key即可：

<Multiselect :options="passwordTypes()" v-model="value" />

<!-- 绑定key为value，每次value变化都会触发div重建 -->
<div v-if="value" :key="value">
  <input type="text" placeholder="Password" />
  <h4>Is Hidden</h4>

  <input type='checkbox' name='toggle' @click="isHidden = !isHidden" />
  <label class="toggle-label" for="toggle" />
</div>

如果value是对象类型，建议绑定value.id这类唯一的基础类型值作为key，避免不必要的重复渲染。

方案2：手动监听value变化重置状态 #

如果你不想触发DOM重建，也可以监听value的变化，手动清空输入内容、重置关联变量：

watch(value, (newVal, oldVal) => {
  if (newVal && newVal !== oldVal) {
    // 如果密码输入框绑定了v-model，直接重置对应绑定变量即可
    // 重置isHidden状态
    isHidden.value = false
  }
})

这种方案适合内部元素少、状态可控的场景，元素多的时候不如方案1便捷。

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