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

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

编辑后的 View

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