フィルタ付きのVue2リスト

Question

Vue2の入力フィルタを使用してテーブル内にforeachループを作成しようとしています。これは動作しますが、フィルタを作成する必要があります。

入力コードが

<div class="form-group"> 
    <input v-model="search" class="form-control" placeholder="Search shortcut..."> 
</div> 

ループは、質問UPDATE

これはJS（ヴュ）コードである

<tr v-for="edition in editions" > 
    <td></td> 
    <td class="alert alert-success">{{ edicion.intellij }}</td> 
    <td class="alert alert-info">{{ edicion.eclipse }}</td> 
    <td>{{ edicion.descripcion }}</td> 
</tr> 

あります。このコードでは、 'エディション'には要素が1つしかありませんが、実際には複数の要素があります。

new Vue({ 
    el: '#app', 
    data: { 
     search: '', 
    editions: [{ 
      intellij: "Ctrl + Espacio", 
      eclipse: "Ctrl + Espacio", 
      description: "Autocompletado de código (clases, métodos, variables)" 
    }], 
}, 

}）;

今、入力テキストで「エディション」をフィルタリングできるようにするにはどうすればよいですか？

Answer 1

あなたが聞いていることはわかっていますが、配列をフィルタリングする検索フィールドとしてテキスト入力を使用するように思えます。 this.search変化の値として

https://codepen.io/nickforddesign/pen/YYpZYe?editors=1010

、計算された値は、配列をフィルタリングし、フィールドが空の場合、それだけの配列を返します。

<div class="app"> 
    <input type="text" v-model="search"> 
    <table> 
    <tbody> 
     <tr v-for="(edition, index) in matches" :key="index"> 
     <td></td> 
     <td class="alert alert-success">{{ edition.intellij }}</td> 
     <td class="alert alert-info">{{ edition.eclipse }}</td> 
     <td>{{ edition.description }}</td> 
     </tr> 
    </tbody> 
    </table> 

とJS：

new Vue({ 
    el: '.app', 
    data() { 
    return { 
     search: '', 
     editions: [{ 
     intellij: "Ctrl + Espacio", 
     eclipse: "Ctrl + Espacio", 
     description: "Autocompletado de código (clases, métodos, variables)" 
     }, { 
     intellij: "Ctrl + C", 
     eclipse: "Ctrl + C", 
     description: "Copiar" 
     }, { 
     intellij: "Ctrl + V", 
     eclipse: "Ctrl + V", 
     description: "Pegar" 
     }] 
    } 
    }, 
    computed: { 
    matches() { 
     return this.search 
     ? this.editions.filter(edition => { 
      let match = false 
      for (let key in edition) { 
      if (edition[key].toLowerCase().includes(this.search.toLowerCase())) { 
       return true 
      } 
      } 
     }) 
     : this.editions 
    } 
    } 
})