Vue - переключить состояние с внешнего клика

Question

• У меня есть цикл кнопок v-for ( при нажатии, активное состояние переключается ),
• и затем у меня есть отдельная кнопка ' X Сбросить фильтры ', которая сбрасывает мои данные.

Что я не могу понять, так это установить текущие «активные» состояния в ложь, когда я нажимаю кнопку «X Clear Filters».

Я пытался вставить isClicked = false в clearAllData метод , но это не сработало.

Любые советы или решения будут очень полезны. Спасибо!

У меня есть следующие настройки:

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

У меня есть еще одна кнопка, чтобы очистить выбор, который следует сразу после:

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

Мои текущие методы для них следующие:

     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();


     }

Answer 1

отправить catButton в loadSearchData как единственный параметр.

      @click="loadSearchData(catButton)"

в 'loadSearchData',

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

в clearAllData

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