时间戳

首页 > 解决方案 > Vue js - 隐藏和取消隐藏时的表单重置

vue.js - Vue js - 隐藏和取消隐藏时的表单重置

问题描述

我正在制作一个列表网站，在列表页面中我有 2 个部分，一个是搜索表单，另一个是列表。

搜索表单最初是隐藏的，点击过滤器图标后会出现搜索表单，

一切正常，但问题是，例如我输入了一个关键字进行搜索，然后点击搜索按钮，然后列出来了。之后，我再次点击过滤器图标，然后搜索表单被清除，我的意思是关键字字段是空的。我怎样才能防止重置

我的搜索表单组件就像

<div v-if="content_filter">
  <Filters 
    :identity="identity" 
    :main_category="main_category_id" 
    :category="category_id"
  />
</div>
<div v-if="content_listing">
  here comes listing
</div>

我的搜索过滤器图标显示和隐藏操作就像

openFilter() {
  console.log(this.content_filter);
  if(this.content_filter==true) {
    this.progress=false;
    this.content=true;
    this.content_filter=false;
    this.content_listing=true;
  } else {
    this.progress=false;
    this.content=true;
    this.content_filter=true;
    this.content_listing=false;
  }
}

我只是隐藏和显示过滤器，然后它正在重置值？？

标签： vue.js

解决方案

v-if当条件为假时卸载子级。如果子状态包含一个表单，它将在每个v-if条件切换时重置。

为了在v-if条件更改之间保留过滤器状态，keyword应将其移至父级并通过Filters双向绑定传递给，例如v-model.

另一种方法是不卸载Filters但使其不可见。这是通过v-show指令实现的。

推荐阅读