[英]Vue - Toggle state from external click
我不知道的是如何在單擊“ X清除過濾器”按鈕時將當前的“活動”狀態設置為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();
}
將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)
//..
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.