带有过滤器的Vue2列表

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