如何使用 nuxt.js 访问mounted() 中的数据

Question

我尝试使用 nuxt.js 在mounted() 函数中执行for 循环。我试图循环的数据是在 created() 中用 axios 调用的，但是当我在 created() 中记录数据时，我得到了这个对象：

[__ob__: Observer]

已安装：

mounted() {
        // creating FeaturedCasinos
        for(let i = 0; i > this.casinos.length; i++) {
            console.log("loop")
            if(this.casinos[i].brand_tags[2].Brand_Tag_Name = "Featured") {
                this.featuredCasinos.push(this.casinos[i]);
            }
        }
    },

创建：

created() {
return axios.get("http://xxx.xxx.xxx.xx/casinos/").then(res2 => (this.casinos = res2.data))
}

编辑：

 asyncData({ params }) {
        return axios.get(casinoURL + params.casinos).then(res => {
            return { 
                casino: res.data, 
                casinoID: res.data[0].id, 
                casinoBonus: res.data[0].bonuses,
                casinoPros: res.data[0].brand_pros,
                casinoCons: res.data[0].brand_cons,
                casinoGames: res.data[0].verticals,
                casinoTags: res.data[0].brand_tags,
                casinoPayments: res.data[0].payment_methods,
                casinoDeposits: res.data[0].Deposit_Methods,
                casinoWithdrawals: res.data[0].Withdrawal_Methods,
                casinoLanguages: res.data[0].languages,
                casinoGamingProvider: res.data[0].gaming_provider,
                casinoAnswers: res.data.map(item => { return {FAQ_Answer_One:item.FAQ_Answer_One, FAQ_Answer_Two:item.FAQ_Answer_Two, FAQ_Answer_Three:item.FAQ_Answer_Three, FAQ_Answer_Four:item.FAQ_Answer_Four, FAQ_Answer_Five:item.FAQ_Answer_Five, FAQ_Answer_Six:item.FAQ_Answer_Six}})
            };
        })
    },
    asyncData({ params }) {
        return axios.get("http://xxx.xxx.xxx.xx/casinos/").then(res2 => {
            return { casinos: res2.data }
        });
    },

Answer 1

根据documentation：

您无法通过 asyncData 中的 this 访问组件实例，因为它是在初始化组件之前调用的。

因此，在asyncData 中，您应该返回将与组件数据合并为对象的数据：

asyncData({ params }) {
  return axios.get("http://xxx.xxx.xxx.xx/casinos/").then(res2 => {
    return { casinos: res2.data }
  }
}

编辑：在这种新情况下，在您编辑问题后，您应该删除asyncData 之一并检索统一数据。您可以使用 async/await 语法使代码更清晰易读：

asyncData({ params }) {
  const res = await axios.get(casinoURL + params.casinos)
  const res2 = await axios.get("http://xxx.xxx.xxx.xx/casinos/")

  return { 
    casino: res.data, 
    casinoID: res.data[0].id, 
    casinoBonus: res.data[0].bonuses,
    casinoPros: res.data[0].brand_pros,
    casinoCons: res.data[0].brand_cons,
    casinoGames: res.data[0].verticals,
    casinoTags: res.data[0].brand_tags,
    casinoPayments: res.data[0].payment_methods,
    casinoDeposits: res.data[0].Deposit_Methods,
    casinoWithdrawals: res.data[0].Withdrawal_Methods,
    casinoLanguages: res.data[0].languages,
    casinoGamingProvider: res.data[0].gaming_provider,
    casinoAnswers: res.data.map(item => { return {FAQ_Answer_One:item.FAQ_Answer_One, FAQ_Answer_Two:item.FAQ_Answer_Two, FAQ_Answer_Three:item.FAQ_Answer_Three, FAQ_Answer_Four:item.FAQ_Answer_Four, FAQ_Answer_Five:item.FAQ_Answer_Five, FAQ_Answer_Six:item.FAQ_Answer_Six}})
    casinos: res2.data
  }

}