使用 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,

              },

          }

      },