[Vuejs]-Use v-model to search in v-for array – Vue.js

by

2👍

✅

You can just use match for that:

filterItems: function(presets) {
  var app = this;
  return presets.filter(function(preset) {
    let regex = new RegExp('(' + app.searchQuery + ')', 'i');
    return preset.presetName.match(regex);
  })
}

Here’s the JSFiddle: https://jsfiddle.net/u2vsbkap/

👤craig_h

1👍

The filter input like：

<input type="text" v-model="searchQuery" />

then modify the function:

filterItems: function(presets) {
var searchQuery = this.searchQuery;
var reg;

if (searchQuery === '') {
    return presets;
}
return presets.filter(function(preset) {
  return preset.presetName.indexOf(searchQuery) >= 0;
})

}

👤JiangangXiong

0👍

After some digging I found this great repo on github https://github.com/freearhey/vue2-filters.

<script src="https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue2-filters.min.js"></script>

or

npm install vue2-filters

import Vue from 'vue'
import Vue2Filters from 'vue2-filters'

Vue.use(Vue2Filters)

Code

<div class="col-md-3" v-for="preset in filterBy(presets, searchQuery)">
👤Giesburts

Leave a comment