将过滤器应用于API响应-vue.js

Question

我有从API获取数据的方法，它向我发送了许多家具的信息：

loadPieces() {
        this.isLoading = true;
        axios.get(this.galleryRoute)
            .then(r => {
                this.gallery = r.data;
                this.isLoading = false;
            })
            .catch(error => {
                this.$nextTick(() => this.loadPieces());
            });
        console.log(this.galleryRoute);
    },

这是我得到的响应的一部分，它仅代表一个部分：

[[{"id":266,"name":" Tray 7x45x32, white stained ash","thumbnail":{"width":840,"height":840,"urls":{"raw":"http://localhost:8888/storage/9c/9d/9c9dadc6-15a2-11e8-a80a-5eaddf2d1b4a.jpeg","small":"http://localhost:8888/storage/9c/9d/[e-mail]","medium":"http://localhost:8888/storage/9c/9d/[e-mail]"}}},

现在，我想创建一个过滤器，以便我可以使用它的ID从JSON对象获得特定的部分。我尝试了搜索，但是到目前为止，我都不知道该怎么做。

预先感谢！

Answer 1

添加一个将过滤器应用于 this.gallery的计算属性：

computed: {
  filteredGallery() {
    if (!this.gallery) return []; // handle gallery being unset in whatever way
    return this.gallery.filter(picture => 
      // some reason to show picture
    );
  }
}

我假设gallery是一个数组，但是如果是对象，则可以对其应用类似的技术，例如使用例如Object.keys(this.gallery)。

然后在模板中，使用filteredGallery代替gallery。