请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

在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回答

提问者 Saboer 2018-01-29 00:26:16

查了一下,slider组件中能打印出数据,在list view上面绑定数据后,listview中props接受传递过来的数据,但是listview中并没有接收到slider组件传递过来的数据,哪里出了问题呢?

0 回复 有任何疑惑可以回复我~
  • listview 和 slider 组件都不是父子关系吧, slider 组件不是 recommend 组件中的吗
    回复 有任何疑惑可以回复我~ 2018-01-29 10:34:54
  • 遇到了一样的问题,上面他说的应该是singer里能拿到数据,listview中props接受传递过来的数据,但是listview中并没有接收到singer传递过来的数据
    回复 有任何疑惑可以回复我~ 2018-03-07 11:07:24
ustbhuangyi 2018-01-29 00:22:44

看一下你渲染的 DOM 节点。

0 回复 有任何疑惑可以回复我~
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信