后台接收并搜索

data 中设置接收搜索到的歌曲列表 searchSongs
复制代码
data() {
    return {
        searchKeyword: "", //用户输入需要搜索的内容
        searchSongs: []    //接收搜索到的歌曲列表
    }
}
复制代码

将接口内容放到搜索到的歌曲列表 searchSongs 中

复制代码
async mounted() {
    let res = await searchMusic();
    //console.log(res)
    this.searchSongs = res.data.result.songs
    //console.log(res.data.result.songs)
}
复制代码

template中配置 循环

复制代码
<div class="list" v-for="(item,i) in searchSongs" :key="i">
    <div class="playItem">
        <div class="left">
            <div class="index">{{i+1}}</div>
            <div class="content">
                <div class="title">{{item.name}}</div>
                <div class="anther">
                    <div class="num">{{item.album.name}}</div>
                </div>
            </div>
        </div>
复制代码
posted @ 2022-05-13 20:33  Cel_0917  阅读(51)  评论(0)    收藏  举报