NuxtJs 如何使用 axios filter api？

Posted 2023-02-16

【中文标题】NuxtJs 如何使用 axios filter api？

【英文标题】：NuxtJs how to use 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 ))
    ,
,

【问题讨论】：

欢迎接受您自己的答案。

【参考方案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 ))
    ,

,