[英]Use v-model to search in v-for array - Vue.js
It's been a long time since I build something with Vue.js. 自从我使用Vue.js构建东西以来已经有很长时间了。 I am building just a simple app that's rendering some items with a
v-for
from an array. 我正在构建一个简单的应用程序,该应用程序使用数组中的
v-for
渲染某些项目。 I want to use a input box with a v-model
to search in the list of items (presets). 我想使用带有
v-model
的输入框来搜索项目(预设)列表。
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. 因此,我尝试了类似
<div class="col-md-3" v-for="preset in presets | searchQuery">
类的方法,但类似的方法似乎不起作用。 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">
You can just use match for that: 您可以为此使用match :
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/ 这是JSFiddle: https ://jsfiddle.net/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.com/freearhey/vue2-filters . 经过一番挖掘后,我在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 npm安装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)">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.