Я использую компонент TABLE Bootstrap-Vue для отображения данных.Это работает нормально.
Однако я не могу понять, как включить / выключить некоторые элементы данных с помощью флажка.Например, если пользователь установит флажок «открыто», таблица обновится и покажет только элементы со статусом «открыто».
Может кто-нибудь помочь мне разобраться?
Вот мой демонстрационный код: ссылка на живой код песочницы
<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>