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

1 个答案: