CODEWITHSUNDEEP
vue.js
Emzyn pvt ltd
Emzyn pvt ltd

Reputation: 55

Vue js - form resetting while hiding and unhiding

I am making a listing website, in the listing page i have 2 parts, one is search form and the other is listing.

The search form is hidden initially, after clicking the filter icon , search form will appear,

Everything working fine,But the issue is, for example i enetered a keyword to search , then hitting the search button, then listing came.After this, i again clicked the filter icon, then the search form is cleared, i mean the keyword field is empty.How can i prevent that resetting

my search form components is like

<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>

And my search filter icon action to show and hide is like

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;
  }
}

I am just hiding and showing the filter, then y it is resetting the value??

Upvotes: 1

Views: 401

Answers (1)

Estus Flask
Estus Flask

Reputation: 222419

v-if unmounts children when a condition is false. If child state contains a form, it will be reset on every v-if condition switch.

In order to preserve filter state between v-if condition changes, keyword should be moved to a parent and be passed to Filters with two-way binding, e.g. v-model.

The alternative is to not unmount Filters but make it invisible. This is achieved with v-show directive.

Upvotes: 1

Related Questions