在singer.vue中能够获取数据，但是listview不能渲染出内容。
<template>
<scroll :data='data'>
<ul>
<li v-for="group in data" class="list-group">
<h2 class="list-group-title">{{group.title}}</h2>
<ul>
<li v-for="item in group.items" class="list-group-item">
<img class="avatar" :src="item.avatar" />
<span class="name">{{item.name}}</span>
</li>
</ul>
</li>
</ul>
</scroll>
</template>
<script type="text/ecmascript-6">
import Scroll from 'base/scroll/scroll'
export default {
//接收singer.vue组件传入的数据，将数据绑定到scroll组件上以便于刷新scroll组件
props: {
data: {
type: Array,
default :function(){
return []
}
}
},
components:{
Scroll
}
}
</script>singer.vue:
<template>
<div class="singers">
<list-view :data='singers'></list-view>
</div>
</template>
<script type="text/ecmascript-6">
import {getSingerList} from 'api/singer.js'
import {ERR_OK} from 'api/config.js'
import ListView from 'base/listview/listview'
const HOT_TITLE='热门'
//将数据的前10条定义为热门数据
const HOT_LIST_LEN=10
export default {
name:'singer',
data(){
return {
//歌手数据
singers:[]
}
},
created(){
this._getSingerList()
},
methods:{
//获取歌手的数据
_getSingerList() {
getSingerList().then( (res)=>{
this.singers=this._normalListSinger(res.data.list)
//console.log(this._normalListSinger(this.singers))
})
},
_normalListSinger(list){
//对获取的歌手数据做处理，我们需要两类数据。(热门数据 与字母列表相对应的数据)
//1.热门数据
let map={
hot:{
title: HOT_TITLE,
items:[]
}
}
//对传入的数据做循环
list.forEach( (item,index)=>{
if(index<HOT_LIST_LEN){
map.hot.items.push({
id:item.Fsinger_mid,
name:item.Fsinger_name,
//头像
avatar: `https://y.gtimg.cn/music/photo_new/T001R300x300M000${item.Fsinger_mid}.jpg?max_age=2592000`
})
}
//2.与字母列表相对应的数据
const key=item.Findex
if(!map[key]){
map[key]={
title:key,
items:[]
}
}
map[key].items.push({
id:item.Fsinger_mid,
name:item.Fsinger_name,
//头像
avatar: `https://y.gtimg.cn/music/photo_new/T001R300x300M000${item.Fsinger_mid}.jpg?max_age=2592000`
})
//3.为了得到有序列表，我们需要对map做处理。
let hot=[]
let ret=[]
for(let key in map){
let val=map[key]
if(val.title.match(/[a-zA-Z]/)){
ret.push(val)
}else if(val.title===HOT_TITLE){
hot.push(val)
}
}
//4.对ret数组进行排序
ret.sort( (a,b)=>{
return a.title.charCodeAt(0)-b.title.charCodeAt(0)
})
var a=hot.concat(ret)
console.log(a)
return hot.concat(ret)
})
}
},
components:{
ListView
}
}
</script>
正在回答 回答被采纳积分+3
2回答
-
遇到了一样的问题，上面他说的应该是singer里能拿到数据，listview中props接受传递过来的数据，但是listview中并没有接收到singer传递过来的数据
有任何疑惑可以回复我~ 2018-03-07 11:07:24
