相关疑难解决方法(0)

我想在 vue.js 中包含搜索栏。我对 vue 还很陌生。我需要在前端过滤数据。当我在脚本部分获取数据时，如何过滤数据。

这是我的代码：

<template>
  <div>
    <div class="search-wrapper panel-heading col-sm-12">
      <input type="text" v-model="search" placeholder="Search" /> <br />
      <br />
    </div>
    <table class="table" id="myTable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Category</th>
          <th>Quantity</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.category }}</td>
          <td>{{ product.quantity }}</td>
          <td>{{ product.status }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: []
    };
  }
};
</script>

我正在使用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>