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

The output generated by grunt-contrib-handlebars differs from that of the handlebars npm task

Tips for creating responsive elements with a z-index of 1 in CSS

troubles encountered in implementing JavaScript to toggle the display of content upon clicking a link

"Why does adding a new span create space between it and the previous ones, and what can be done to prevent this from

Exception in posting strings or JSON with react.js

Transforming a single object into several arrays

What is the most effective way to determine if a statement is either false or undefined?

Launching PDF on IE11 in a new tab seamlessly without any prompts - mssaveoropenblob

What is the best way to incorporate images from an external module into my React project?

Making a column in a Vue data grid return as a clickable button

Convert the data into a format that is compatible with JavaScript

The es6 object class is not defined

Warning from Vue: Steer clear of directly changing a prop as it will be replaced whenever the parent component undergoes re-rendering

Verify whether a div element is styled in a specific manner

Is it possible for Cypress to execute test files that are imported from outside of the Cypress folder

VueJS fails to display table information

Manipulating arrays in JavaScript through HTML processing

Struggling to connect CSS and JavaScript files to index.html on Heroku while utilizing Node.js

Using Typescript to set a custom timeout duration based on a dynamic variable within a for loop

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was