Question

我第一次潜入Vue并尝试制作一个简单的过滤器组件，该组件从API获取数据对象并对其进行过滤。

下面的代码有效，但我找不到一种方法来“重置”过滤器而不进行另一个API调用，让我觉得我接近这个错误。

在DOM中显示/隐藏是否比更改数据对象更好？

HTML

<button v-on:click="filterCats('Print')">Print</button>

<div class="list-item" v-for="asset in filteredData">
    <a>{{ asset.title.rendered }}</a>
</div>

的Javascript

export default {
  data() {
    return {
      assets: {}
    }
  },
  methods: {
    filterCats: function (cat) {
      var items = this.assets
      var result = {}
      Object.keys(items).forEach(key => {
        const item = items[key]
        if (item.cat_names.some(cat_names => cat_names === cat)) {
          result[key] = item
        }
      })
      this.assets = result
    }
  },
  computed: {
    filteredData: function () {
      return this.assets
    }
  },
}

Answer 1

在DOM中显示/隐藏是否比更改数据对象更好？

完全没有。改变数据是＆＃34; Vue方式＆＃34;。

您不需要修改assets来过滤它。

建议的方法是使用computed property：您将创建一个filteredData计算属性，该属性取决于cat数据属性。每当您更改cat的值时，filteredData都会自动重新计算（使用this.assets的当前内容过滤cat。

如下所示：

＆＃13;

new Vue({
  el: '#app',
  data() {
    return {
      cat: null,
      assets: {
      	one: {cat_names: ['Print'], title: {rendered: 'one'}},
        two: {cat_names: ['Two'], title: {rendered: 'two'}},
        three: {cat_names: ['Three'], title: {rendered: 'three'}}
      }
    }
  },
  computed: {
    filteredData: function () {
      if (this.cat == null) { return this.assets; } // no filtering
      var items = this.assets;
      var result = {}
      Object.keys(items).forEach(key => {
        const item = items[key]
        if (item.cat_names.some(cat_names => cat_names === this.cat)) {
          result[key] = item
        }
      })
      return result;
    }
  },
})

＆＃13;

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <button v-on:click="cat = 'Print'">Print</button>

  <div class="list-item" v-for="asset in filteredData">
      <a>{{ asset.title.rendered }}</a>
  </div>
</div>

＆＃13;

在不改变原始数据的情况下过滤Vue中的对象列表

1 个答案: