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

CodePudding user response：

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.