javascript - 使用 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,
              },
          }
      },
      created() {
          this.fetchTasks();
          this.fetchLocations();
          this.fetchresources();
      },
      computed: {
        filtered() {
          return this.events
            .filter(event => !this.filters.resource || event.resource === this.filters.resource)
            .filter(event => !this.filters.location || event.location === this.filters.location)
        },

        resources() {
          return this.resources
            .map(resource => resource.name)
            .filter((resource, index, self) => self.indexOf(resource) === index);
        },

        locations() {
          return this.locations
            .map(location => location.name)
            .filter((location, index, self) => self.indexOf(location) === index);
        },
      },
      methods: {
        fetchItems() {
          axios.get('/items')
          .then(response => {
            this.events = response.data
          })
      },
      fetchLocations() {
          axios.get('/locations')
          .then(response => {
            this.locations = response.data
          })
      },
      fetchresources() {
          axios.get('/resources')
          .then(response => {
            this.resources = response.data
          })
      }
    },
  }
  </script>

Answer 1

首先，不要将计算属性命名为与数据属性相同的名称。 Vue 将选取数据属性，而不是具有相同名称的计算属性。

this.filters.location 的值和this.filters.resource是对象，因为您定义了 <option /> 的值如:

<option v-for="resource in resources" :value="resource">{{ resource.name }}</option>

因此，如果用户选择资源选项“资源 A”，则 this.filters.resource 的值将是{ name: "Resource A" }或类似的东西。而在 javascript 中，对象比较不能简单地通过 == 运算符来完成。这意味着

的值

!this.filters.resource || event.resource === this.filters.resource

永远都是假的。

考虑仅比较名称，即 this.filters.resource.name .