如何使用nuxt.js訪問mounted()中的數據

Question

我試圖用 nuxt.js 在 mount() 函數中做一個 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

根據文檔：

您無法通過 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
  }

}