使用vue-aplayer插件时出现的问题

刚刚接触vue-aplayer,从github上找到了用法，首先需要npm install vue-aplayer –save ，之后在组件中引入import VueAplayer from ‘vue-aplayer’，别忘了注册

components: { 

'a-player': VueAplayer 

}

 

这里还有一个问题，用v-if,而不是v-show,因为是异步请求，所以一开始播放器中是没有歌曲的，所有给了个v-if不然会插件默认会先生成播放器，导致报错

–2017.12.2 ,现在的代码版本是这样的~

<template>
<div class="music">
<a-player v-if='isShow' :autoplay='true' :music="musicList"></a-player>
</div>
</template>
<script>
import Axios from 'axios'
import VueAplayer from 'vue-aplayer'
export default{
data(){
return {
musicList:[],
isShow:false
}
},
mounted(){
Axios.get('../static/data/musicdata.json').then(res=>{
let List = res.data.musicData;
// console.log(res);
List.forEach(element => {
let obj = {
title:element.title,
pic:element.musicImgSrc,
url:element.src,
author:element.author,
lrc:"../static/"+element.lrc
}
this.musicList.push(obj);
});
this.isShow=true;
console.log(this.musicList);
}).catch();
},
components: {
'a-player': VueAplayer
}
}
</script>
<style>
.music{
margin:1rem 0;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

还是有问题，网上查过之后，是因为在执行了play()方法以后立即执行pause()方法，至于解决方法……还在寻找中 



之前遇到的问题是 



~~~~想明白了一些 


 

酱紫，this.musicList是空的，obj就是空的喽。



如果先给this.musicList赋值了，那么push之后就会酱紫，重复两遍

其实是很好想明白的哈。

补充的代码，看起来更直观

Axios.get('../static/data/musicdata.json').then(res=>{
// let List = res.data.musicData;
// console.log(res);
this.musicList.forEach(element => {
let obj = {
title:element.title,
pic:element.musicImgSrc,
url:element.src,
author:element.author,
lrc:"../static/"+element.lrc
}
this.musicList.push(obj);
console.log(this.musicList);
});
this.isShow=true;
console.log(this.musicList);
}).catch();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

错误是这样的 



正确的是酱紫的