Vue2 list with filter - vuejs2

Question

I´m trying to make a foreach loop in a table with a input filter in Vue2. This works but i need to create a filter.
The input code is
<div class="form-group">
<input v-model="search" class="form-control" placeholder="Search shortcut...">
</div>
The loop is
<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>
QUESTION UPDATE
This is js (Vue) code. In this code 'editions' have only one element, but in real case have more than one element.
new Vue({
el: '#app',
data: {
search: '',
editions: [{
intellij: "Ctrl + Espacio",
eclipse: "Ctrl + Espacio",
description: "Autocompletado de código (clases, métodos, variables)"
}],
},
});
Now, ¿how can i make the input text can filter 'editions'?

Answer 1

I'm not 100% sure I know what you're asking, but it sounds like you want to use the text input as a search field that will filter the array.
https://codepen.io/nickforddesign/pen/YYpZYe?editors=1010
As the value of this.search changes, the computed value will filter the array, and if the field is empty, it will just return the array.
<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>
And the 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
}
}
})