在singer.vue中能够获取数据，但是listview不能渲染出内容。
来源：5-4 listview 基础组件的开发和应用-滚动列表实现
Saboer
2018-01-28
<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>
2回答
-
Saboer
提问者
2018-01-29
查了一下，slider组件中能打印出数据，在list view上面绑定数据后，listview中props接受传递过来的数据，但是listview中并没有接收到slider组件传递过来的数据，哪里出了问题呢？
022018-03-07 -
ustbhuangyi
2018-01-29
看一下你渲染的 DOM 节点。
00
相似问题