Как получить доступ к данным в mounted () с помощью nuxt.js


Как получить доступ к данным в mounted () с помощью nuxt.js

07.09.2020 12:29:41 Просмотров 1 Источник

Я попытался сделать цикл for внутри функции mounted() с помощью nuxt.js. Данные, которые я пытался зациклить, были вызваны с помощью axios in created (), но когда я регистрирую данные в 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 }
        });
    },
У вопроса есть решение - Посмотреть?

Ответы - Как получить доступ к данным в mounted () с помощью nuxt.js / How to access data in mounted() with nuxt.js

Является ответом!
sebasaenz

07.09.2020 12:38:49

Согласно документации:

У вас нет доступа к экземпляру компонента через это внутри asyncData, потому что он вызывается перед инициализацией компонента.

Поэтому вместо этого в 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
  }

}
Помочь в развитии проекта:
Закрыть X