后台接收并搜索

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>

 

标签：res,列表,搜索,searchSongs,后台,歌曲,接收,data
来源： https://www.cnblogs.com/xmy86/p/16259016.html