NuxtJs 如何使用 axios filter api？答案

【问题标题】：NuxtJs how to use axios filter api?NuxtJs 如何使用 axios filter api？
【发布时间】：2021-10-28 04:58:33
【问题描述】：

api 数据太多，我想过滤它，因为我需要将 api 放入 cookie 中并保存。如果无法过滤 api 数据，我无法将其全部保存到 cookie。

类型错误 this.homeProdsx.map 不是函数

async asyncData({ $axios, params }) {
    const homeProds = await $axios.$get(process.env.backendurl + '/home-page-alls?slug=' + params.slug)
    let homeProdsx = homeProds[0] 
    return { homeProdsx }
},
computed:{
    filteredapi(){
        return this.homeProdsx.map(({ id, title, price,  }) => ({ id, title, price }))
    },
},

【问题讨论】：

欢迎接受您自己的答案。

标签： vuejs2 axios nuxt.js

【解决方案1】：

您可以在调用该方法之前尝试this.homeProdsx?.map 以查看homeProdsx 是否可用。

关于可选链的更多信息可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

【讨论】：

谢谢，但不工作这个 api 在调用方法之前可用。 _this$homeProdsx.map is not a function
@lsfsteve 您是否使用客户端导航来触发asyncData？您确定这里没有错字或缺少任何相关内容吗？
我使用 Strapi 制作我的 api，我认为问题是 let homeProdsx = homeProds[0] 它会使 api 成为一个对象而不是数组，所以不能使用 .map 但我需要使用let homeProdsx = homeProds[0] 因为是_slug .vue 无法使用 v-for 我必须尝试 const homeProds = await $axios.$get(process.env.backendurl + '/home-page-alls `让 homeProdsx = homeProds ` ` return { homeProdsx } `<div v-for="homeproduct ,idx" in homeProdsx :key> {{ homeproduct }} <div> 可以调用但是当我使用 [0] 时它失败了〜谢谢

【解决方案2】：

问题解决了

再获取一个 api 但不要let homeProdsx = homeProds[0]

async asyncData({ $axios, params }) {
    const homeProds = await $axios.$get(process.env.backendurl + '/home-page-alls?slug=' + params.slug)
    let homeProdsx = homeProds[0]

    const testx = await $axios.$get(process.env.backendurl + '/home-page-alls?slug=' + params.slug)
    return { homeProdsx, testx}
},

这里是计算出来的

computed: {
    filteredapi(){
        return this.testx.map(({ id, title, price, gg, homeitem, int, }) => ({ id, title, price, gg, homeitem, int }))
    },

},

【讨论】：