- 我有一个 v-for 按钮循环(单击时,切换事件状态),
- 然后我有一个单独的按钮“X 清除过滤器”,用于重置我的数据。
我不明白的是,当我单击“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(){
this.categoryFilters.forEach(it=>it.isClicked = false)
//..
}
关于javascript - Vue - 通过外部点击切换状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52088311/