CODEWITHSUNDEEP
javascriptvuejs2nuxt.js
RMH
RMH

Reputation: 831

Vue - Toggle state from external click

What I can't figure out, is how to set the current "active" states to false when I click the 'X Clear Filters' button.

I have tried putting isClicked = false, in the clearAllData method, but that didn't work out.

Any tips or solutions would be a great help. Thank you!

I have the following set up:

    <button v-for="catButton in categoryFilters" :key="catButton.id" 
          class="button button--link button--filter"
          :class="{ active: catButton.isClicked }"
          @click="loadSearchData(catButton.slug, catButton.isClicked = !catButton.isClicked)"
          ref="el"
    >
                        {{ catButton.name }}
    </button>

I then have another button to clear those selections that follows right after:

    <button id="clear-all" v-on:click="clearAllData()">
          X CLEAR FILTERS
    </button>

My current methods for those are as follows:

     loadSearchData(value){
         let self = this;
         if(categoriesArray.includes(value)){
             rmh_remove(categoriesArray, value);
         } else {
             categoriesArray.push(value);
         }
         self.postsData.page = 1;
         categorieString = (categoriesArray.length > 0) ? categoriesArray.join('+') : self.$route.params.slug ;
         self.postsData['filter[category_name]'] = categorieString;
         self.getPosts();    
     },
     clearAllData(){

         console.log(this.$refs.el);
         this.postsData.page = 1;
         this.postsData['filter[category_name]'] = this.$route.params.slug;
         categorieString = this.$route.params.slug;
         categoriesArray = [];
         this.getPosts();


     }

Upvotes: 0

Views: 34

Answers (1)

Steven Spungin
Steven Spungin

Reputation: 29109

send catButton into loadSearchData as the only parameter.

      @click="loadSearchData(catButton)"

in 'loadSearchData', 

loadSearchData(catButton){
   catButton.isClicked = !catButton.isClicked
   const value = catButton.slug
   //...

in clearAllData

clearAllData(){
   this.categoryFilters.forEach(it=>it.isClicked = false)
   //..
}

Upvotes: 2

Related Questions