Filter arrays in Vue.js using checkboxes

Question

Filter arrays in Vue.js using checkboxes

I'm currently working with vuejs and I need to implement a filtering feature for my array using checkboxes. I attempted to use v-model to filter the array based on three specific options: "Truck," "Van," or "Tx". However, I haven't been successful in achieving the desired outcome. Additionally, I would prefer not to utilize a computed method for this task.

new Vue({
  el: "#app",
  data: {
  selection:[],
    todos: [
          {
    "Name": "CHS_200_TL_L62_TRUCK"
  },
        {
    "Name": "VHS_600_TL_L62_TRUCK"
  },
  {
    "Name": "VHS_116_TL_L62_TRUCK"
  },
  {
    "Name": "VHS_146_TX_L62_VAN"
  },
    {
    "Name": "VHS_613_TL_L62_TRUCK"
  },
  {
  "Name":"JE_50_OL_T62_TRUCK"
  },

  {
    "Name": "VHS_T10_OL_L62_TRUCK"
  },
    {
  "Name":"JE_59_OL_T62_TRUCK"
  },
      {
    "Name": "LEE_100_TL_L62_TRUCK"
  }
    ],

  mounted:function(){

  },
  methods: {
  
}

    
  },
  methods: {
    fin: function(todo){
        todo
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> 
<div id="app">
  <h2>Todos:</h2>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Truck" v-model="checkedNames"> Truck<br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Van" v-model="checkedNames"> Van<br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="TX" v-model="checkedNames">
<label for="vehicle3"> TX</label><br>
  
 
    <li v-for="todo in todos">
{{todo.Name}}
    </li>
  
</div>

javascript vue.js filter vuejs2

Answer 1

Answer №1

If computed property isn't your preference, you can utilize a watcher:

new Vue({
  el: "#app",
  data() {
    return {
      selection:[],
      filtered: [],
      todos: [{"Name": "CHS_200_TL_L62_TRUCK"}, {"Name": "VHS_600_TL_L62_TRUCK"}, {"Name": "VHS_116_TL_L62_TRUCK"},  {"Name": "VHS_146_TX_L62_VAN"}, {"Name": "VHS_613_TL_L62_TRUCK"}, {"Name":"JE_50_OL_T62_TRUCK"}, {"Name": "VHS_T10_OL_L62_TRUCK"}, {"Name":"JE_59_OL_T62_TRUCK"},   {"Name": "LEE_100_TL_L62_TRUCK"}],
    }
  },
  watch: {
    selection: {
      handler() {
        this.filtered= []
        if (this.selection.length) {
          this.todos.forEach(t => {
            this.selection.forEach(s => {
              if (t.Name.split('_').find(w => w === s.toUpperCase())) {
                if (!this.filtered.find(f => f.Name === t.Name)) this.filtered = [ ...this.filtered, t]
              }
            })
          })
        } else {
          this.filtered = [...this.todos]
        }
      },
      deep: true,
      immediate: true
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Tasks:</h2>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Truck" v-model="selection"> Truck<br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Van" v-model="selection"> Van<br>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="TX" v-model="selection"> TX<br>
  <ul>
    <li v-for="task in filtered">
      {{task.Name}}
    </li>
  </ul>
</div>

Answer 2

If computed property isn't your preference, you can utilize a watcher:

new Vue({
  el: "#app",
  data() {
    return {
      selection:[],
      filtered: [],
      todos: [{"Name": "CHS_200_TL_L62_TRUCK"}, {"Name": "VHS_600_TL_L62_TRUCK"}, {"Name": "VHS_116_TL_L62_TRUCK"},  {"Name": "VHS_146_TX_L62_VAN"}, {"Name": "VHS_613_TL_L62_TRUCK"}, {"Name":"JE_50_OL_T62_TRUCK"}, {"Name": "VHS_T10_OL_L62_TRUCK"}, {"Name":"JE_59_OL_T62_TRUCK"},   {"Name": "LEE_100_TL_L62_TRUCK"}],
    }
  },
  watch: {
    selection: {
      handler() {
        this.filtered= []
        if (this.selection.length) {
          this.todos.forEach(t => {
            this.selection.forEach(s => {
              if (t.Name.split('_').find(w => w === s.toUpperCase())) {
                if (!this.filtered.find(f => f.Name === t.Name)) this.filtered = [ ...this.filtered, t]
              }
            })
          })
        } else {
          this.filtered = [...this.todos]
        }
      },
      deep: true,
      immediate: true
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Tasks:</h2>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Truck" v-model="selection"> Truck<br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Van" v-model="selection"> Van<br>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="TX" v-model="selection"> TX<br>
  <ul>
    <li v-for="task in filtered">
      {{task.Name}}
    </li>
  </ul>
</div>

Answer 3

Answer №2

Let's address the typos present in your code :

You have defined selection:[] in the script, but in the template, you are using checkedNames which is not defined. To solve this issue, you should use a computed value that looks for todos containing selection
Add a computed value named todosFiltered in your script

...
computed: {
    todosFiltered() {
      return this.todos.filter((todo) => {
        return this.selection.every((select) => todo.Name.toLowerCase().includes(select.toLowerCase()));
      });
    },
  },
....

Replace references of todos with todosFiltered in your template

<template>
  <div id="app">
    <h2>Todos:</h2>
    <input
      type="checkbox"
      id="vehicle1"
      name="vehicle1"
      value="Truck"
      v-model="selection"
    />
    Truck<br />
    <input
      type="checkbox"
      id="vehicle2"
      name="vehicle2"
      value="Van"
      v-model="selection"
    />
    Van<br />
    <input
      type="checkbox"
      id="vehicle1"
      name="vehicle1"
      value="TX"
      v-model="selection"
    />
    <label for="vehicle1"> TX</label><br />

    <li v-for="todo in todosFiltered">
      {{ todo.Name }}
    </li>
  </div>
</template>

Answer 4

Let's address the typos present in your code :

You have defined selection:[] in the script, but in the template, you are using checkedNames which is not defined. To solve this issue, you should use a computed value that looks for todos containing selection
Add a computed value named todosFiltered in your script

...
computed: {
    todosFiltered() {
      return this.todos.filter((todo) => {
        return this.selection.every((select) => todo.Name.toLowerCase().includes(select.toLowerCase()));
      });
    },
  },
....

Replace references of todos with todosFiltered in your template

<template>
  <div id="app">
    <h2>Todos:</h2>
    <input
      type="checkbox"
      id="vehicle1"
      name="vehicle1"
      value="Truck"
      v-model="selection"
    />
    Truck<br />
    <input
      type="checkbox"
      id="vehicle2"
      name="vehicle2"
      value="Van"
      v-model="selection"
    />
    Van<br />
    <input
      type="checkbox"
      id="vehicle1"
      name="vehicle1"
      value="TX"
      v-model="selection"
    />
    <label for="vehicle1"> TX</label><br />

    <li v-for="todo in todosFiltered">
      {{ todo.Name }}
    </li>
  </div>
</template>

Filter arrays in Vue.js using checkboxes

Answer №1

Answer №2

Similar questions

"Unleashing the Power of MongoDB's Dynamic $in

An argument error in IE 8 caused by an invalid procedure call

handle an exception within the initializer of its object

"Tips for retrieving properties from a JSON object that has been converted to a string

Creating a sleek and modern web application using Laravel 5 and Vue JS

What is the best way to retrieve the value of a dynamically created button in code?

jQuery ajaxSetup: handling error retries for ajax calls is not possible

How to apply styling to a specific portion of text within a list element using Vue.js

Issue with Backbone Event Dropping Functionality

Troubleshooting: Resolving issues with Vue's global EventBus in my project

Implement a function to delete an item from an array within a React object by utilizing the UseState hook

In Pure JavaScript, an HTML element is added every time the click event is triggered

The AWS Lambda function in Node.js encountered an internal server error

Success Notification in ASP.net MVC after Form Submission

Locating the JSON path within an object

What causes the image to not appear at the center bottom of the page when using IE for loading?

Dynamic Formatting with Vue JS: Enhancing Phone Number Input

Suggestions for incrementing a button's ID every time it is clicked

Vue unit test failures due to component method calling this.$route.query - Error: Unable to access property 'query' of null

Steps to retrieve values from a grid and execute a sum operation using PROTRACTOR