[Vuejs]-How to access data in mounted() with nuxt.js

3๐Ÿ‘

โœ…

As per the documentation:

You do NOT have access to the component instance through this inside asyncData because it is called before initializing the component.

So instead in asyncData you should return the data that will be merged with the component data as an object:

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

EDIT: in this new case after you edited the question you should delete one of the asyncData and retrieve the unified data. You may use the async/await syntax to make the code more clear and easier to read:

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
  }

}
๐Ÿ‘คsebasaenz

Leave a comment