Javascript 将表格作为用户类型筛选到输入栏

我有一个基于国家对象数组填充的表，我还有一个搜索栏，它将通过国家数组进行实时过滤，并仅显示部分或完全匹配用户在搜索栏中输入内容的国家，从而与表交互

问题是我是vue的新手，我很难弄清楚如何让它工作。如果有人能看看我的代码，直接指出我的正确方向，或者我做错了什么，那就太好了

所以现在我的逻辑是在文本字段上有一个v型模型，它将用户键入的任何内容绑定到一个名为“filterBy”的数据值

我的理解可能不正确，但我现在想的是，通过在computed中创建filteredCountries函数，由于computed将在函数中的变量发生更改时运行，因此每当在搜索栏中键入内容时，它将自动被调用，因此，过滤countries数组，该表将重新提交

<template>
  <div class="countries-table">
    <div class="countries-search-bar">
      <v-flex xs12 sm6 md3>
        <v-text-field
          v-model="filterBy"
          placeholder="Search by country name or alpha2"
        />
      </v-flex>
    </div>
    <v-data-table
      :headers="headerValues"
      :items="items"
      :pagination.sync="pagination"
      item-key="id"
      class="elevation-1"
      :rows-per-page-items="[300]"
    >
      <template v-slot:headers="props">
        <tr>
          <th
            v-for="header in props.headers"
            :key="header.text"
            :class="[
              'column sortable',
              pagination.descending ? 'desc' : 'asc',
              header.value === pagination.sortBy ? 'active' : ''
            ]"
            @click="changeSort(header.value)"
          >
            <v-icon small>arrow_upward</v-icon>
            {{ header.text }}
          </th>
          <th>
            Edit
          </th>
        </tr>
      </template>

      <template v-slot:items="props">
        <tr :active="props.selected" @click="props.selected = !props.selected">
          <td>{{ props.item.country_alpha2 }}</td>
          <td class="text-xs-right">{{ props.item.country_name }}</td>
          <boolean-cell
            custom-class="text-xs-right"
            :input="props.item.is_active"
            :output="{ true: 'Yes', false: 'No' }"
          ></boolean-cell>
          <date-cell
            custom-class="text-xs-right"
            :input="props.item.updated_at"
          ></date-cell>
          <td class="text-xs-right" @click="triggerEdit(props.item)">
            <v-icon class="edit-icon">edit</v-icon>
          </td>
        </tr>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import BooleanCell from '~/components/global-components/Table/BooleanCell'
import DateCell from '~/components/global-components/Table/DateCell'

export default {
  components: {
    BooleanCell,
    DateCell
  },
  props: {
    headerValues: {
      type: Array,
      required: true
    },
    items: {
      type: Array,
      required: true
    }
  },
  computed: {
    filteredCountries() {
      return this.items.filter(country => {
        return country.country_name.includes(this.filterBy)
      })
    }
  },
  data() {
    return {
      pagination: {
        sortBy: 'country_alpha2'
      },
      filterBy: ''
    }
  },
  methods: {
    changeSort(headerValue) {
      if (this.pagination.sortBy === headerValue) {
        this.pagination.descending = !this.pagination.descending
      } else {
        this.pagination.sortBy = headerValue
        this.pagination.descending = false
      }
    }
  }
}
</script>

向上箭头
{{header.text}}
编辑
{{props.item.country_alpha2}
{{props.item.country_name}
编辑
从“~/components/global components/Table/BooleanCell”导入BooleanCell
从“~/components/global components/Table/DateCell”导入DateCell
导出默认值{
组成部分：{
布尔细胞，
DateCell
},
道具：{
人头价值：{
类型：数组，
必填项：true
},
项目：{
类型：数组，
必填项：true
}
},
计算：{
filteredCountries（）{
返回此.items.filter（国家=>{
返回国家/地区。国家/地区名称。包括（此过滤器项）
})
}
},
数据（）{
返回{
分页：{
脏话：“国家2”
},
筛选项：“”
}
},
方法：{
更改排序（headerValue）{
if（this.pagination.sortBy===headerValue）{
this.pagination.descending=！this.pagination.descending
}否则{
this.pagination.sortBy=headerValue
this.pagination.descending=false
}
}
}
}

尽管我在搜索栏中输入了一些东西，但该表与当前代码保持不变

---

有人能告诉我我做错了什么吗？

对于

v-data-table

项目，您正在使用

项目

，它将作为道具提供。您应该使用

filteredCountries

computed属性。

对于

v-data-table

项，您正在使用的

项是作为道具提供的。您应该使用
filteredCountries
computed属性