vuejs filter array with checkboxes

Vzupo 0
Viewed 31

I am using vuejs and I want to filter my array using checkboxes. I have tried using v-model to filter an array based on three options. If the name contains "Truck", "Van", or "Tx". I am not having any luck. Also i don't want to use a computed method.

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="vehicle1" name="vehicle1" value="TX" v-model="checkedNames">
<label for="vehicle1"> TX</label><br>
  
 
    <li v-for="todo in todos">
{{todo.Name}}
    </li>
  
</div>

vuejs2 filter vue.js javascript
2 Answers

First of all, you have typos in your code :

  • In the script you've defined selection:[] but in the template you have used checkedNames which is undefined To respond on your question, you should use a computed value that searchs for todos that contains selection
  • In your script define a computed value named todosFiltered
...
computed: {
    todosFiltered() {
      return this.todos.filter((todo) => {
        return this.selection.every((select) => todo.Name.toLowerCase().includes(select.toLowerCase()));
      });
    },
  },
....
  • In your template use todosFiltered instead of todos
<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>
SIHEM BOUHENNICHE0

If you don't want to use computed property , you can use 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>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"> TX<br>
  <ul>
    <li v-for="todo in filtered">
      {{todo.Name}}
    </li>
  </ul>
</div>

Nikola Pavicevic0
Related