DEV Community

Cover image for How to make Checkbox Filter with Vue JS
Seye Yemi-Olowolabi
Seye Yemi-Olowolabi

Posted on • Updated on

How to make Checkbox Filter with Vue JS

Hello Guys, In this tutorial we will be making a simple checkbox filtering component in Vue JS and Bootstrap. i will also be using fontawesome to add a few icons. To follow along, you have to have a vue 3 project set up. if you do not have a vue JS project already set up, you can do so with the vue CLI

Click Here to view the Github repository containing all the code for this project.
Click Here to view a preview of the this project working on codesandbox.

After you have installed the vue CLI and have scaffolded a new project, we will firstly add that black background to our project like the one in the image

Vue js Checkbox filter

Navigate to the public folder and click on the index.html file, then add this small style tag to the head tag



<style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #app {
        height: 100%;
        background-color: black;
      }
    </style>


Enter fullscreen mode Exit fullscreen mode

Now lets get to the main part

The project will carried out in four steps;

  • Installing bootstrap
  • Installing fontawesome
  • Building the User Interface
  • Adding functionality

Installing Bootstrap

The bootstrap installation is pretty straightforward and only requires one line of code if you install it with the node package manager "npm". it automatically pulls in all the source files required.



npm install bootstrap


Enter fullscreen mode Exit fullscreen mode

Installing Font Awesome

  • The first step in installing fontawesome is to use npm to install the core package which contains all the utilities to make the icons work ```shell

npm i --save @fortawesome/fontawesome-svg-core

- Next you will need to install the icon packages that you want to use. for the free icon packages. the various icon packages can be found on the [Font awesome](https://fontawesome.com/) website. i will be installing free solid, free regular and free brands icon packages
```shell


# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons


Enter fullscreen mode Exit fullscreen mode
  • You will need to install the fontawesome vue component, this is what will be used to position the icons on the page ```shell

npm i --save @fortawesome/vue-fontawesome@latest-3

- To start adding icons, you will need to replace your src/main.js file with the following code snippet. specific icons can be imported and then added to the library for use
```js


/* Set up using Vue 3 */
import { createApp } from 'vue'
import App from './App.vue'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

/* add icons to the library */
library.add(faUserSecret)

createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')


Enter fullscreen mode Exit fullscreen mode

Building the User Interface

The HTML markup snippet for this challenge is written below. an important aspect of this markup is that the checkboxes have been modeled to the checked array from the data method. whenever a checkbox is clicked, its value would be inside that array



<template>
  <div
    class="
      container-fluid
      d-flex
      flex-column
      aligns-items-center
      justify-content-center
      bg-dark
    "
  >
    <div class="row bg-dark border-bottom border-primary border-3">
      <div class="col-4 text-light pt-2 ps-4 d-flex justify-content-center">
        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            value="happy"
            id="flexCheckDefault"
            v-model="checked"
            checked
          />
          <font-awesome-icon
            icon="fa-solid fa-face-grin-wide"
            style="color: yellow; font-size: 25px"
          />
        </div>
      </div>
      <div class="col-4 text-light pt-2 ps-4 d-flex justify-content-center">
        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            value="meh"
            id="flexCheckDefault"
            v-model="checked"
            checked
          />
          <font-awesome-icon
            icon="fa-solid fa-face-meh"
            style="color: yellow; font-size: 25px"
          />
        </div>
      </div>
      <div class="col-4 text-light pt-2 ps-4 d-flex justify-content-center">
        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            value="sad"
            id="flexCheckDefault"
            v-model="checked"
            checked

          />
          <font-awesome-icon
            icon="fa-solid fa-face-frown"
            style="color: yellow; font-size: 25px"
          />
        </div>
      </div>
    </div>
    <div class="container-fluid" v-for="item in computedItems" :key="item.id">
      <div class="row bg-dark p-3">
        <div
          class="
            col-4
            text-light
            d-flex
            aligns-items-center
            justify-content-center
          "
        >
          <font-awesome-icon
            v-bind="{ icon: item.icon }"
            :style="{ fontSize: 25 + 'px', color: item.color }"
          />
        </div>
        <div
          class="
            col-4
            text-light
            d-flex
            aligns-items-center
            justify-content-center
          "
        >
          <h5>{{item.text}}</h5>
        </div>
        <div
          class="
            col-4
            text-light
            d-flex
            aligns-items-center
            justify-content-center
          "
        >
          <input
            class="
              bg-dark
              text-light
              border border-secondary border-3
              rounded
              ps-2

            "
            type="number"
            name=""
            id=""
            :value="item.id"
            style="width: 70%"
          />
        </div>
      </div>
    </div>
  </div>
</template>


Enter fullscreen mode Exit fullscreen mode

Adding Functionality

Next up is the script section of the project. This contains the functionality
the first thing to be done is to import the bootstrap into the prioject



// importing bootstrap into the project
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";


Enter fullscreen mode Exit fullscreen mode

Inside our export defaults array would be using various lifecycle methods like data, mounted and we will also be using the computed method. Inside the data method we would be storing an array of the items and the categories that would be checked by default



export default {
  name: "App",
  components: {},

  data() {
    return {
      checked: [
        "happy",
        "sad",
      ],
      items: [],
    };
  },

};


Enter fullscreen mode Exit fullscreen mode

The array of items is empty and thats because it would be coming from the mounted method.



mounted() {
    this.items = [
      {
        id: 1,
        text: "food",
        category: "happy",
        icon: "fa-solid fa-burger",
        color: "yellow"
      },

      {
        id: 2,
        text: "games",
        category: "happy",
        icon: "fa-solid fa-chess",
        color: "purple"

      },

      {
        id: 3,
        text: "bills",
        category: "sad",
        icon: "fa-solid fa-money-bill-1-wave",
        color: "green"
      },

      {
        id: 4,
        text: "illness",
        category: "sad",
        icon: "fa-solid fa-bed-pulse",
        color: "red"
      },
    ];
  },


Enter fullscreen mode Exit fullscreen mode

Lastly we have the computed property, here lies the functionality for filtering the array of items. the method here returns an array based on the array of items and the checked array.
If nothing is checked (checked array is empty), it returns an empty array.
If theres something insde the checked array, it filters the array of items and only includes the ones that have their category in the checked array



computed: {
    computedItems(){
      if (this.checked.length === 0) {
        return [];
      } else {
        return this.items.filter(item =>
          this.checked.indexOf(item.category) !== -1 
        );  
      }
    }
  }


Enter fullscreen mode Exit fullscreen mode

So thats it guys, we built a simple checkbox filtering component with Vue JS, we added some nice icons to it with fontawesome and we styled it with bootstrap.

Thank you for reading

- Seye Samuel Yemi-Olowolabi

Top comments (0)