带过滤器

Question

我试图在Vue2中使用输入过滤器的表中创建一个foreach循环。这有效，但我需要创建一个过滤器。

输入代码是

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

循环

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

问题更新

这是js（Vue）代码。在此代码中，“版本”只有一个元素，但实际上只有一个元素。

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

}）;

现在，¿如何让输入文字可以过滤'版本'？

Answer 1

我并非100％确定我知道你在问什么，但听起来你想将文本输入用作过滤数组的搜索字段。

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

当this.search的值发生变化时，计算出的值将过滤数组，如果该字段为空，则只返回数组。

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