Question

自从我用Vue.js构建东西以来已经有很长一段时间了。我正在构建一个简单的应用程序，它可以从数组中使用v-for呈现一些项目。我想使用带有v-model的输入框来搜索项目列表（预设）。

代码

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

数据

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

所以我尝试了类似<div class="col-md-3" v-for="preset in presets | searchQuery">之类的东西以及其他类似的东西，但似乎不起作用。我想过使用计算属性，但由于我不确切知道它们是如何工作的，所以我还没有想到它。是否有人有快速简便的解决方案？

修改

我发现我可以使用某种方法进行搜索。但问题是它只会显示完全匹配的结果。我想要的是，如果我输入内容并且字母包含在名称中，它仍将显示（部分）匹配的项目。

方法

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

编辑视图

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

Answer 1

您只需使用match：

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

这里是JSFiddle：https://jsfiddle.net/u2vsbkap/

Answer 2

过滤器输入如：

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

然后修改功能：

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

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

}

Answer 3

经过一番挖掘后，我在github https://github.com/freearhey/vue2-filters找到了这个伟大的回购。

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

或

npm install vue2-filters

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

Vue.use(Vue2Filters)

代码

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

使用v-model搜索v-for数组 - Vue.js

3 个答案: