It's been a long time since I build something with Vue.js. I am building just a simple app that's rendering some items with a v-for from an array. I want to use a input box with a v-model to search in the list of items (presets).

Code

<div class="row top20">
    <div class="col-md-3" v-for="preset in presets">
        <div class="template-block" :id="preset.id">
            <img src="" v-bind:alt="preset.img" class="img img-responsive img-template">
            <h3>{{ preset.presetName }}</h3>
        </div>
    </div>
</div>

Data

searchQuery: '',
presets: [
    {id: '2', presetName: 'WooCommerce', img: 'woomerce.png'},
    {id: '3', presetName: 'Magento', img: 'magento.png'},
    {id: '1', presetName: 'Custom', img: 'custom.png'}
]

So I tried something like <div class="col-md-3" v-for="preset in presets | searchQuery"> and other things like that but that don't seem to work. I thought of using a puted property but since I don't exactly know how they work I haven't figured it out. Is there someone with a fast and easy solution?

Edit

I've figured out that I can use a method to search. But the problem with that is that it will only display the results of a exactly match. What I would like is that If I type something and the letters are included in the name it will still display the items that (for a part) match.

Method

methods: {
    filterItems: function(presets) {
        var app = this;
        return presets.filter(function(preset) {
            return preset.presetName == app.searchQuery;
        })
    }
}

Edited view

<div class="col-md-3" v-for="preset in filterItems(presets)" :key="preset.presetName">

It's been a long time since I build something with Vue.js. I am building just a simple app that's rendering some items with a v-for from an array. I want to use a input box with a v-model to search in the list of items (presets).

Code

<div class="row top20">
    <div class="col-md-3" v-for="preset in presets">
        <div class="template-block" :id="preset.id">
            <img src="http://placehold.it/120x120" v-bind:alt="preset.img" class="img img-responsive img-template">
            <h3>{{ preset.presetName }}</h3>
        </div>
    </div>
</div>

Data

searchQuery: '',
presets: [
    {id: '2', presetName: 'WooCommerce', img: 'woomerce.png'},
    {id: '3', presetName: 'Magento', img: 'magento.png'},
    {id: '1', presetName: 'Custom', img: 'custom.png'}
]

So I tried something like <div class="col-md-3" v-for="preset in presets | searchQuery"> and other things like that but that don't seem to work. I thought of using a puted property but since I don't exactly know how they work I haven't figured it out. Is there someone with a fast and easy solution?

Edit

I've figured out that I can use a method to search. But the problem with that is that it will only display the results of a exactly match. What I would like is that If I type something and the letters are included in the name it will still display the items that (for a part) match.

Method

methods: {
    filterItems: function(presets) {
        var app = this;
        return presets.filter(function(preset) {
            return preset.presetName == app.searchQuery;
        })
    }
}

Edited view

<div class="col-md-3" v-for="preset in filterItems(presets)" :key="preset.presetName">

• javascript
• vue.js
• vuejs2

3 Answers 3

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/u2vsbkap/

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;
})

}

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

<script src="https://cdn.jsdelivr/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)">