将过滤器应用于 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\/9c9dadc6-15a2-11e8-a80a-5eaddf2d1b4a@140.jpeg","medium":"http:\/\/localhost:8888\/storage\/9c\/9d\/9c9dadc6-15a2-11e8-a80a-5eaddf2d1b4a@420.jpeg"}}},

现在我想创建一个过滤器，以便我可以使用它的 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。

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

Apply filter to API response - vue.js

vue.js

axios