vue composition api中的反应性数据未在模板中呈现

Question

我希望我能找到为什么这不起作用的答案。我正在尝试从 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，但都没有工作。我似乎无法弄清楚这一点。

Answer 1

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>