Bootstrap-Vue: How to use checkboxes with Table component to filter data?

Question

I am using Bootstrap-Vue's TABLE component to display data. That is working fine.

However, I am 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: "[email protected]"
        },
        {
          uid: 2,
          firstname: "Gerick",
          lastname: "Tetla",
          email: "[email protected]"
        },
        {
          uid: 3,
          firstname: "Raymund",
          lastname: "Espy",
          email: "[email protected]"
        },
        {
          uid: 4,
          firstname: "Dilly",
          lastname: "Dimitriev",
          email: "[email protected]"
        },
        {
          uid: 5,
          firstname: "Roby",
          lastname: "Tabner",
          email: "[email protected]"
        }
      ],
      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>

TJ Weems TJ Weems · Accepted Answer · 2019-05-20T22:08:23

if you want to filter based off status you could just string a filter method on to the end of your 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));

Bootstrap-Vue: How to use checkboxes with Table component to filter data?

2 Answers