v-for配列を検索するためにv-modelを使用する - 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">のようなものを試してみましたが、そのような他のものが、それは動作していないようです。私は計算されたプロパティを使用することを考えましたが、私は正確に彼らがどのように動作しているか分からないので、私はそれを理解していません。すばやく簡単なソリューションを持っている人はいますか？

編集

私が検索する方法を使用できることを考え出しました。しかし、その問題は、正確に一致した結果しか表示されないことです。私が好きなのは、何かを入力して文字が名前に含まれていても、（部分的に）一致する項目が表示されることです。次いで

<input type="text" v-model="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

ようなフィルタ入力

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インストールvue2-フィルタ

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

Vue.use(Vue2Filters) 

コード、それは私が推測する最良の選択肢ではありません除い

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