使用 Vue 过滤表列

Question

我已经成功地用 Vue 构建了一个表，它有下拉列表作为每列的标题。每个下拉列表的值来自不同的 axios 调用作为数组，并且它们被正确填充。我遇到的问题是，第二次我过滤任何列时，它隐藏了整个表，并且无法重置它以将其恢复。所以它根本没有正确过滤，也没有回到“全部显示”选项。我在这里做错了什么：<table style="width:100%; text-align:center;">      <thead>          <tr>                  <th>                  <select v-model="filters.resource">                    <option v-for="resource in resources" :value="resource">{{ resource.name }}</option>                  </select>              </th>              <th>                  <select v-model="filters.location">                    <option v-for="location in locations" :value="location">{{ location.name }}</option>                  </select>              </th>              <th></th>              <th>                  <select v-model="filters.status">                    <option v-for="status in statuses" :value="status">{{ status }}</option>                  </select>              </th>              <th></th>          </tr>      </thead>      <tbody  v-for="event in filtered">          <tr>              <td>{{ event.resource }}</td>              <td>{{ event.location }}</td>              <td>{{ event.status }}</td>          </tr>      </tbody>  </table>  <script>  export default {      data () {          return {              events: [],              locations: [],              resources: [],              filters: {                title: null,                resource: null,                location: null,                status: null,              },          }      },