Vue - 从外部点击切换状态

Question

我有一个 v-for 按钮循环（单击时，活动状态被切换），
然后我有一个单独的按钮“X 清除过滤器”，用于重置我的数据。

我想不通的是，当我单击 'X Clear Filters' 按钮时如何将当前 "active" 状态设置为 false。

我曾尝试将 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(){
   this.categoryFilters.forEach(it=>it.isClicked = false)
   //..
}

Vue - 从外部点击切换状态

Vue - Toggle state from external click

javascript

vuejs2

nuxt.js