link685 link686 link687 link688 link689 link690 link691 link692 link693 link694 link695 link696 link697 link698 link699 link700 link701 link702 link703 link704 link705 link706 link707 link708 link709 link710 link711 link712 link713 link714 link715 link716 link717 link718 link719 link720 link721 link722 link723 link724 link725 link726 link727 link728 link729 link730 link731 link732 link733 link734 link735 link736 link737 link738 link739 link740 link741 link742 link743 link744 link745 link746 link747 link748 link749 link750 link751 link752 link753 link754 link755 link756 link757 link758 link759 link760 link761 link762 link763 link764 link765 link766 link767 link768 link769 link770 link771 link772 link773 link774 link775 link776 link777 link778 link779 link780 link781 link782 link783 link784 link785 link786 link787 link788 link789 link790 link791 link792 link793 link794 link795 link796 link797 link798 link799 link800 link801 link802 link803 link804 link805 link806 link807 link808 link809 link810 link811 link812 link813 link814 link815 link816 link817 link818 link819 link820 link821

[Vue.js] Bootstrap-Vue How to use checkboxes with Table component to filter data?

when using Bootstrap-Vue’s TABLE component to display data. That is working fine.

However, when unable to figure out how to toggle on/off some data items using a checkbox. For example, if a user checks the box for “open”, the table will update and show only the items with a status of “open”.

Can someone help me figure this out?

Here’s my demo code: link to live sandbox code

<template>
<div>
<b-form-group label>
<b-input-group>
<b-form-input v-model=”filter” placeholder=”Type to search for a specific issue”></b-form-input>
<b-input-group-append>
<b-button :disabled=”!filter” @click=”filter = ‘’”>Clear</b-button>
</b-input-group-append>
</b-input-group>
</b-form-group>
<b-form-group label=”View Status:”>
<b-form-checkbox-group
id=”checkbox-group-1”
v-model=”selected”
:options=”options”
name=”flavour-1”
\></b-form-checkbox-group>
</b-form-group>
<b-table :items=”posts” :fields=”fields” :filter=”filter”>
<!– A custom formatted column –>
<template slot=”name” slot-scope=”data”>{ data.value.user }</template>
</b-table>
</div>
</template>

<script>
import axios from “axios”;
export default {
data() {
return {
filter: null,
selected: [“pending”], // Must be an array reference!
options: [
{ text: “Open”, value: “open” },
{ text: “Assigned”, value: “assigned” },
{ text: “Pending”, value: “pending” },
{ text: “Closed”, value: “closed” }
],
rawPosts: [
{
userId: 1,
status: “open”,
id: 1,
title:
“sunt aut facere repellat provident occaecati excepturi optio reprehenderit”,
body:
“quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto”
},
{
userId: 1,
status: “open”,
id: 2,
title: “qui est esse”,
body:
“est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla”
},
{
userId: 1,
status: “closed”,
id: 3,
title: “ea molestias quasi exercitationem repellat qui ipsa sit aut”,
body:
“et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut”
},
{
userId: 1,
status: “assigned”,
id: 4,
title: “eum et est occaecati”,
body:
“ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit”
},
{
userId: 1,
status: “pending”,
id: 5,
title: “nesciunt quas odio”,
body:
“repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque”
}
],
users: [
{
uid: 1,
firstname: “Claiborne”,
lastname: “Heberden”,
email: “cheberden0@gravatar.com
},
{
uid: 2,
firstname: “Gerick”,
lastname: “Tetla”,
email: “gtetla1@whitehouse.gov
},
{
uid: 3,
firstname: “Raymund”,
lastname: “Espy”,
email: “respy2@freewebs.com
},
{
uid: 4,
firstname: “Dilly”,
lastname: “Dimitriev”,
email: “ddimitriev3@skype.com
},
{
uid: 5,
firstname: “Roby”,
lastname: “Tabner”,
email: “rtabner4@sohu.com
}
],
fields: [
{ key: “id” },
{ key: “title” },
{ key: “body” },
{ key: “user”, label: “Assigned To” }
]
};
},
created() {
//this.loadPosts();
//this.loadNames();
},
methods: {
userFrom(id) {
const user = this.users.find(user => user.uid === id);
return user ? `${user.lastname}, ${user.firstname}` : “not assigned”;
}
},
computed: {
posts() {
if (this.rawPosts.length && this.users.length) {
return this.rawPosts.map(rawPost => ({
…rawPost,
user: this.userFrom(rawPost.userId)
}));
} else {
console.log(“some not assigned”);
}
}
}
};
</script>

Solution :

if you want to filter based off status you could just string a filter method on to the end of the computed property posts

some thing like this

posts() {
if (this.rawPosts.length && this.users.length) {
return this.rawPosts.map(rawPost => ({
…rawPost,
user: this.userFrom(rawPost.userId)
})).filter(post => post.status == this.selected);
} else {
console.log(“some not assigned”);
}
}

All I did was add this

.filter(post => post.status == this.selected);

Update: or if you want to show for each checked status you can do this

.filter(post => this.selected.includes(post.status));

Solution 2:

there is edited that CodeSandbox.. something like this should work:

Edit: cleaned it up so that it is closer to what you originally had (changed the watch to a computed property and renamed variables back to what you had them named)..

Edit2: that is my final product - cleaned it up more, made it shorter and easier to read.

CodeSandbox:

Code Snippet:

new Vue({
el: “#app”,
data() {
return {
filter: null,
selected: [“open”], // Must be an array reference!
options: [
{ text: “Open”, value: “open” },
{ text: “Assigned”, value: “assigned” },
{ text: “Pending”, value: “pending” },
{ text: “Closed”, value: “closed” }
],
rawPosts: [
{
userId: 1,
status: “open”,
id: 1,
title:
“sunt aut facere repellat provident occaecati excepturi optio reprehenderit”,
body:
“quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto”
},
{
userId: 1,
status: “open”,
id: 2,
title: “qui est esse”,
body:
“est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla”
},
{
userId: 2,
status: “closed”,
id: 3,
title: “ea molestias quasi exercitationem repellat qui ipsa sit aut”,
body:
“et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut”
},
{
userId: 2,
status: “assigned”,
id: 4,
title: “eum et est occaecati”,
body:
“ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit”
},
{
userId: 4,
status: “pending”,
id: 5,
title: “nesciunt quas odio”,
body:
“repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque”
}
],
users: [
{
uid: 1,
firstname: “Claiborne”,
lastname: “Heberden”,
email: “cheberden0@gravatar.com
},
{
uid: 2,
firstname: “Gerick”,
lastname: “Tetla”,
email: “gtetla1@whitehouse.gov
},
{
uid: 3,
firstname: “Raymund”,
lastname: “Espy”,
email: “respy2@freewebs.com
},
{
uid: 4,
firstname: “Dilly”,
lastname: “Dimitriev”,
email: “ddimitriev3@skype.com
},
{
uid: 5,
firstname: “Roby”,
lastname: “Tabner”,
email: “rtabner4@sohu.com
}
],
fields: [
{ key: “id” },
{ key: “title” },
{ key: “body” },
{ key: “user”, label: “Assigned To” }
]
};
},
created() {
//this.loadPosts();
//this.loadNames();
},
methods: {
userFrom(id) {
const user = this.users.find(user => user.uid === id);
return user ? `${user.lastname}, ${user.firstname}` : “not assigned”;
},
postsFromStatus() {
return this.rawPosts.filter(o => this.selected.includes(o.status));
},
mapPostsAndUsers(posts) {
return posts.map(post => ({
…post,
user: this.userFrom(post.userId)
}));
}
},
computed: {
posts() {
return this.rawPosts.length && this.users.length
? this.selected.length === 0
? this.mapPostsAndUsers(this.rawPosts)
: this.mapPostsAndUsers(this.postsFromStatus())
: console.log(“some not assigned”);
}
}
})

#app {
background-color: #fefefe;
padding: 1rem 2rem 0 2rem;
border: none !important;
margin-bottom: 1rem;
}

/** ADDED FOR BREVITY
* REMOVE THIS TO SEE ALL DATA IN A CELL*/
td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/** */
<script src=”https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src=”https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<link href=”https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel=”stylesheet”/>
<link href=”https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" rel=”stylesheet”/>

<div id=”app”>
<div class=”main”>
<b-container>
<b-form-group label>
<b-input-group>
<b-form-input v-model=”filter” placeholder=”Type to search for a specific issue”></b-form-input>
<b-input-group-append>
<b-button :disabled=”!filter” @click=”filter = ‘’”>Clear</b-button>
</b-input-group-append>
</b-input-group>
</b-form-group>
<b-form-group label=”View Status:”>
<b-form-checkbox-group id=”checkbox-group-1” v-model=”selected” :options=”options” name=”flavour-1”></b-form-checkbox-group>
</b-form-group>
<b-table :items=”posts” :fields=”fields” :filter=”filter”>
<!– A custom formatted column –>
<template slot=”name” slot-scope=”data”>{ data.value.user }</template>
</b-table>
</b-container>
</div>
</div>

CodePen:

Click here for CodePen