Magento Question posted in
The official documentation can be found here.

Use v-model to search in v-for array – Vue.js – Magento

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: 'woocommerce.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 computed 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">
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    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)">

  2. 0

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

    }

    Login or Signup to reply.
  3. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search