[英]How to filter an Array with Checkboxes items?
I want to filter my checkboxes I search it on internet there was information but I couldn't work it with my code.我想过滤我的复选框我在互联网上搜索它有信息但我无法使用我的代码。
I want when you click on the checkbox it must be same as the category.我希望当您单击复选框时,它必须与类别相同。
This is some code of the checkbox:这是复选框的一些代码:
<div>
<input class="form-check-input checkboxMargin" type="checkbox" value="All" v-model="selectedCategory">
<p class="form-check-label checkboxMargin">All</p>
</div>
This is my grey box layout:这是我的灰盒布局:
<div class="col-sm-12 col-md-7">
<div class="card rounded-circle mt-5" v-for="item of items" :key="item['.key']">
<div>
<div class="card-body defaultGrey">
<h5 class="card-title font-weight-bold">{{ item.name }}</h5>
<div class="row mb-2">
<div class="col-sm ">
<div class="row ml-0"><h6 class="font-weight-bold">Job:</h6><h6 class="ml-1">{{ item.job }}</h6></div>
<div class="row ml-0"><h6 class="font-weight-bold">Category:</h6><h6 class="ml-1">{{ item.categories }}</h6></div>
<div class="row ml-0"><h6 class="font-weight-bold">Location:</h6><h6 class="ml-1">{{ item.location }}</h6></div>
<div class="row ml-0"><h6 class="font-weight-bold">Niveau:</h6><h6 class="ml-1">{{ item.niveau }}</h6></div>
<div class="row ml-0"><h6 class="font-weight-bold">Availability:</h6><h6 class="ml-1">{{ item.availability }}</h6></div>
<h6>{{ item.info }}</h6>
<div class="row ml-0"><h6 class="font-weight-bold">Posted:</h6><h6 class="ml-1">{{ item.user }}</h6></div>
</div>
</div>
<div class="row">
<div class="col-xs-1 ml-3" v-if="isLoggedIn">
<router-link :to="{ name: 'InternshipDetails', params: {id: item['.key']} }" class="btn bg-info editbtn">
Details
</router-link>
</div>
<div class="col-xs-1 ml-3 mr-3" v-if="isLoggedIn && item.user == currentUser">
<router-link :to="{ name: 'Edit', params: {id: item['.key']} }" class="btn btn-warning editbtn">
Edit
</router-link>
</div>
<div class="col-xs-1" v-if="isLoggedIn && item.user == currentUser">
<button @click="deleteItem(item['.key'])" class="btn btn-danger dltbtn">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
And I have my object here but how can I filter my grey boxes with category:我在这里有我的 object 但是我如何用类别过滤我的灰色框:
selectedCategory: []
You need to create one-way
binding between your CategoryCheckBox
component and your ListCard
component.您需要在
CategoryCheckBox
组件和ListCard
组件之间创建one-way
绑定。
Because you provided separated code when I can not reproduce it to give you a solution based on your own, I suggest this example to explain my solution.因为当我无法重现它时您提供了单独的代码以根据您自己的解决方案为您提供解决方案,所以我建议使用此示例来解释我的解决方案。
Step One:第一步:
You have many ways to CRUD your items
using a Plugins or Vuex or global instance , in my example I used global instance in main.js
您有很多方法可以使用插件或Vuex或全局实例对您的
items
进行 CRUD,在我的示例中,我在main.js
中使用了全局实例
Vue.prototype.$myArray = ["Books", "Magazines", "Newspaper"];
I assume you created your items
data in the ListCards
component我假设您在
ListCards
组件中创建了您的items
数据
Step Two:第二步:
You need to add @change
event in your checkbox
to handle checked
and unchecked
states.您需要在
checkbox
中添加@change
事件来处理checked
和unchecked
状态。 I used static data (Book) for value
.我使用 static 数据(书籍)作为
value
。
<label>
<input type="checkbox" value="Books" @change="handleCategory($event)" /> Books
Now, let's implement handleCategory
method, but before that, as we know that Checkbox
and ListCards
are independents which means we need to define a bus
to create event
communication between them and this is your issue so we define the bus
inside the main.js
现在,让我们实现
handleCategory
方法,但在此之前,我们知道Checkbox
和ListCards
是独立的,这意味着我们需要定义bus
来创建它们之间的event
通信,这是您的问题,所以我们在main.js
中定义bus
Vue.prototype.$bus = new Vue({});
Now we define handleCategory
like this:现在我们像这样定义
handleCategory
:
methods: {
handleCategory(e) {
this.$bus.$emit("checkCategory", e);
}
}
Step Three:第三步:
How can our ListCards
listen to this event
?我们的
ListCards
如何监听这个event
?
By call $bus.$on(..)
when the component is created
( Hope you know what Vue lifecycle methods mean )通过在
created
组件时调用$bus.$on(..)
(希望您知道 Vue 生命周期方法的含义)
created() {
this.$bus.$on("checkCategory", e => this.checkCategory(e));
},
When the user click the check box the component runs handleCategory
then runs checkCategory
inside ListCard
.当用户单击复选框时,组件运行
handleCategory
然后在ListCard
checkCategory
Inside my ListCard, I have categories
and originalCategories
as data在我的 ListCard 中,我有
categories
和originalCategories
作为数据
data() {
return {
categories: this.$myArray,
originalCategories: this.$myArray
};
},
and a template:和一个模板:
<ul v-for="(category,index) in categories" :key="index">
<CategoryItem :categoryName="category" />
</ul>
and a created
method ( lifecycle )和一个
created
的方法(生命周期)
created() {
// $bus is a global object to communicate between components
this.$bus.$on("checkCategory", e => this.checkCategory(e));
},
and our filtering methods:和我们的过滤方法:
methods: {
checkCategory(e) {
let target = e.target;
let value = e.target.value;
target.checked
? this.filterCatergories(value)
: (this.categories = this.originalCategories);
},
filterCatergories(value) {
this.categories = this.categories.filter(val => val === value);
}
}
What's important for you is:对你来说重要的是:
this.categories.filter(val => val === value); //will not do nothing
const categories=this.categories.filter(val => val === value); //will update the view.
And you can change the code or make it better and simple.您可以更改代码或使其更好更简单。
@Update @更新
You can also use computed properties but because we have a parameter here which is the category name we need get
and set
.您也可以使用计算属性,但是因为我们这里有一个参数,它是我们需要
get
和set
的类别名称。
computed: {
filteredItems: {
get: function() {
if (this.selectedCategory.length == 0) return this.items;
return this.items.filter(value => {
for (const category of this.selectedCategory) {
if (value == category) return value;
}
});
},
set: function(category) {
this.selectedCategory.push(category);
}
}
},
methods: {
checkCategory(e) {
let target = e.target;
let value = e.target.value;
target.checked
? (this.filteredItems = value)
: this.selectedCategory.pop(value);
}
}
Use computed properties:使用计算属性:
computed: {
filteredItems(){
if(this.selectedCategory.length == 0) return this.items;
return this.items.filter(el => {
for(let i = 0; i < this.selectedCategory.length; i++){
if(el.categories == this.selectedCategory[i]) return el;
}
});
}
}
Then you go for v-for="item of filteredItems"
然后你 go for
v-for="item of filteredItems"
I didnt tested it.我没有测试它。 If you provide me more code i could help you more
如果您提供更多代码,我可以为您提供更多帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.