Vuejs2 带筛选器的Vue2列表

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

输入代码是

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

}))

---

现在，我如何才能使输入文本能够过滤“版本”？

我不是100%确定我知道你在问什么，但听起来你想使用文本输入作为搜索字段来过滤数组

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

当

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>

---

数组中的“全部”是什么意思？问题已更新。那么您的预期输出是什么？这是一个正确的部分答案。但假设数组中有多个元素。我可以创建一个在所有数组中搜索的函数吗？不仅仅在一个元素中。我确实在

editions

数组中包含了多个元素，这就是你所说的吗？我创建了多个“匹配项”来过滤所有不同的数组。

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

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