使用 Vue 过滤 JSON 响应答案

【问题标题】：Filtering a JSON response with Vue使用 Vue 过滤 JSON 响应
【发布时间】：2019-05-25 17:36:47
【问题描述】：

我正在练习使用axios with Vue，但我认为这可能更像是一个通用的 JSON 问题。

我已成功使用 axios 获取我的本地 products.json 文件，然后我使用过滤器创建一个新数组，该数组仅包含具有匹配部门属性的产品，并将它们循环出来。

这是执行此操作的正确方法，还是我可以实际过滤原始 axios 调用的 JSON 结果？我知道我可以传递一个参数，该参数将依次执行特定的数据库调用，并且首先只提供所需的 JSON。

data(){
    return {
        products: []
    }
},
components: {
    Product
},
computed: {
    foodProducts(){
        return this.products.filter(x => x.department == 'Food')
    }
},
mounted() {
    axios
    .get('./json/products.json')
    .then(response => (this.products = response.data.products))
}

谢谢。只是试图澄清其背后的理论。

【问题讨论】：

那么，怎么了？
没什么，只是想澄清一下这是正确的做法。例如，我可以在初始 axios 调用时过滤结果，还是我总是需要在之后将其过滤为计算属性？

标签： javascript vue.js axios

【解决方案1】：

根据您的情况或要求，它可以通过多种方式发挥作用。

你的方法行得通。或者，您也可以直接从 API 调用过滤结果，假设后端返回完整结果。

data() {
 return {
  filteredProducts: []
 }
}

mounted() {
 axios.get(API_URL)
  .then(response => {
   const products = response.data

   this.filteredProducts = products.filter(product => product.department.includes('food'))
  })
}

【讨论】：

【解决方案2】：

如果您从后端服务器查询产品列表，您可以使用查询参数，如

xxx/products?department=XXX

然后后端服务器可以为您进行过滤。

在你的情况下，看起来你只是在读取一个本地 JSON 文件，所以返回整个 JSON，你必须自己过滤。

【讨论】：

这仅在您完全控制后端时才有效，但在特定情况下仍然有效。
当然可以。如果您使用的是公共 API 端点，请查看 API 文档，或与后端开发人员核实是否传递查询字符串参数。 @RuChernChong 感谢您的指出。