javascript - Vue.js 在数组中搜索关键字

我正在使用 Vue.js 使用输入字段从 JSON 数组中过滤元素。该阵列由移动电话组成。

查看三星阵列，我有三星 Galaxy S5、三星 Galaxy S6 等。

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

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

我的代码:

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

最佳答案

您可以拆分搜索关键字并使用 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));
      });
    }
  }
});

关于javascript - Vue.js 在数组中搜索关键字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53276545/