数组中的Vue.js搜索关键字

Question

我正在使用Vue.js通过输入字段来过滤JSON数组中的项目。该阵列由手机组成。

看三星阵列，我有三星银河S5，三星银河S6等。

现在，当我键入：Samsung时，我会得到所有三星的列表。键入Galaxy S5时，会得到Samsung Galaxy S5。但是，当我键入Samsung S5时，我什么也没得到，因为在“ Samsung”和“ S5”之间有“ Galaxy”。

我希望有人可以帮助我解决这一问题。

我的代码：

<input type="text" v-model="keyword" class="form-control" id="telefoon" placeholder="Search...">


<script>
var app = new Vue({
  el: '#app',
  data: {
    keyword: '',
    samsungList: []
  },
  computed: {
    samsungFilteredList() {
      return this.samsungList.filter((samsung) => {
        return samsung.title.toLowerCase().includes(this.keyword.toLowerCase());
      });
    }
  }
});
</script>

Answer 1

您可以拆分搜索关键字，然后使用来检查标题中是否存在每个单词，如果标题中存在每个单词every，则返回true

var app = new Vue({
  el: '#app',
  data: {
    keyword: '',
    samsungList: []
  },
  computed: {
    samsungFilteredList() {
      return this.samsungList.filter((samsung) => {
        return this.keyword.toLowerCase().split(' ').every(v => samsung.title.toLowerCase().includes(v));
      });
    }
  }
});