Vue.js使用v-if切换筛选表单显隐时表单被重置，如何避免该问题？

你用了v-if指令控制搜索表单的显隐：v-if切换为false时，会直接将对应的DOM元素及组件从页面中完全销毁，表单中用户输入的临时值会随着组件销毁被清空。当你再次点击筛选图标将v-if切换为true时，Filters组件会重新初始化渲染，自然会回到初始的空值状态。

以下三个方案可按需选择：

• 方案1：替换v-if为v-show（改造成本最低）
  v-show仅通过CSS的display属性控制元素显隐，不会销毁DOM和组件，组件内部的输入值会完整保留。只需要修改你的模板代码即可：

<!-- 把v-if替换为v-show -->
<div v-show="content_filter">
  <Filters 
    :identity="identity" 
    :main_category="main_category_id" 
    :category="category_id"
  />
</div>
<div v-show="content_listing">
  here comes listing
</div>

逻辑层的openFilter代码不需要做任何修改。

• 方案2：父组件托管表单值（适合必须用v-if的场景）
  如果你的业务逻辑必须使用v-if销毁组件，可以在父组件的data中定义筛选参数对象，通过双向绑定将Filters组件的表单值同步到父组件存储，组件重新渲染时将存储的参数回传给Filters组件做回填即可。如果需要页面刷新后仍保留筛选值，可以将参数存在localStorage/sessionStorage中。

• 方案3：用keep-alive缓存组件状态
  如果你需要保留组件的所有内部状态，不想单独维护表单值，可以用keep-alive包裹Filters组件，缓存组件实例，即便用v-if触发重新渲染，也会读取缓存的状态，不会丢失表单值：

<div v-if="content_filter">
  <keep-alive>
    <Filters 
      :identity="identity" 
      :main_category="main_category_id" 
      :category="category_id"
    />
  </keep-alive>
</div>

内容的提问来源于stack exchange，提问作者Emzyn pvt ltd