Реактивные данные в api композиции vue не отображаются в шаблоне

Надеюсь, я найду ответ, почему это не работает. Я пытаюсь получить данные из API и отобразить их в шаблоне vue. Вот мой код (вкратце).

<template>
 <div v-for="song in songs" :key="song.id" class="custom-card" @click="addAudio($event, song)">
  {{ song }}
 </div>
</template>

<script>
const axios = require('axios').default
import { reactive, onMounted } from 'vue'

export default {
        name: 'SongCarousel',
        props: {          
            carouselUrl: String,
        },
        setup(props) {
            let songs = reactive({})
           // const data = localState.value

            onMounted(
                axios
                    .get(props.carouselUrl)
                    .then(response => {
                        songs = response.data.results[0].category_tracks
                        console.log(songs)
                    })
            )

            return {
                songs,
            }
        },
</script>

С помощью этого кода я могу видеть выбранные «песни» в консоли, но они не отображаются на странице. Я пробовал onBeforeMount, onRenderTriggered, onUpdated, но ни один из них не работает. Кажется, я не могу понять этого.


javascript vuejs3 vue-component vue-composition-api vue-reactivity
person Ajayi Olamide    schedule 23.11.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

reactive должен иметь объект в качестве параметра:

<template>
 <div v-for="song in state.songs" :key="song.id" class="custom-card" @click="addAudio($event, song)">
  {{ song }}
 </div>
</template>

<script>
const axios = require('axios').default
import { reactive, onMounted } from 'vue'

export default {
        name: 'SongCarousel',
        props: {          
            carouselUrl: String,
        },
        setup(props) {
            let state= reactive({songs:[]})
         

            onMounted(()=>{
             axios
                    .get(props.carouselUrl)
                    .then(response => {
                        state.songs = response.data.results[0].category_tracks
                        console.log(state.songs)
                    })
                
            })

            return {
                state,
            }
        },
</script>
person Boussadjra Brahim    schedule 23.11.2020
comment
Эй, @ boussadjra-brahim, спасибо, чувак! Я пробовал этот подход раньше, но он не работал. Я предполагаю, что моя ошибка заключалась в создании song объекта, а не массива, поскольку response.data.results[0].category_tracks должен быть итерируемым массивом, верно? - person Ajayi Olamide; 23.11.2020
comment
пожалуйста, да, это должен быть массив, вложенный в объект, переданный в реактивный, пожалуйста, не забудьте проголосовать за мой ответ - person Boussadjra Brahim; 23.11.2020
comment
Разве это не должно быть state.songs = response.data.results[0].category_tracks? - person Yom T.; 23.11.2020
comment
Я также заметил, что если я попытаюсь назначить songs другой переменной, такой как let songs = state.song, или вернуть { songs: state.songs }, то она не будет отображаться в шаблоне. Это почему? Извините, если мой вопрос звучит глупо, я как-то новичок в vue и его композиционном api. - person Ajayi Olamide; 23.11.2020
comment
@ yom-s, ты прав. Это должно быть state.songs = response.data.results[0].category_tracks - person Ajayi Olamide; 23.11.2020
comment
@AjayiOlamide вы можете использовать toRef как return { songs: toRef(state,'songs') }, не забудьте импортировать его import { reactive, onMounted,toRef } from 'vue', а затем использовать songs без состояния в шаблоне - person Boussadjra Brahim; 23.11.2020