I haven't used Vue.js in a while. I am currently working on a simple app where I'm rendering items using a v-for from an array. I want to implement an input box with a v-model to search through 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'}
]
I've tried using something like
<div class="col-md-3" v-for="preset in presets | searchQuery">Edit
I realized that I can use a method for searching. However, the issue is that it only displays exact matches. I would like the search function to display items that partially match the input.
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">