使用Vue js的搜索栏过滤器

Question

我正在尝试过滤从 api 获取数据的表，我尝试了此解决方案，但它不起作用。 我找不到问题出在哪里，如果我通过了搜索输入事件侦听器

这是我的表格组件：

<template>
<table class="mt-12 border-2 border-gray-600">
  <thead>
    <tr>
      <th v-for="header in data.headers" :key="header" class="text-left border-l-2 border-gray-600 border-b-2 border-gray-600 bg-red-400 ">{{ header }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(rows, index) in data.rows" :key="index">
      <td v-for="row in rows" :key="row" class="border-l-2 border-gray-600"  >{{ row }}</td>
    </tr>
  </tbody>
</table>
</template>
<script>
export default {
  props: {
    data: Object,
    default: {}
  }
}
</script>
<style src="../assets/tailwind.css"/>

我的问题：

如果有人可以帮助我定义我的问题并解决这个问题？

感谢您的帮助。

Answer 1

您可以在将数据作为道具传递的地方使用计算得出的数据。

 <BaseTable :data='data' /> 

这里不要像这样使用创建一个可以被过滤的计算数据。

<BaseTable :data='filteredData' />

在您的道具中，您可以简单地过滤它或直接发送数据。

computed: {
     filteredData() {
          if(this.search) {
               // filter your data as you want and return
            }
           else // return your main data
      }
}

这是一个简单的示例：

https://codesandbox.io/s/filterlist-example-vdwhg?file=/src/App.vue

并将您的包含更改为包含。

Answer 2

您遇到了什么错误？我认为您在 filterRows 函数中使用 this.search ，它不是 vue 实例属性。它应该是 this.data.search。搜索也与 V-model 一起使用，因此您应该在数据（JSON 对象）之外声明它。