后台接收并搜索
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>

浙公网安备 33010602011771号