使用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

错误是这样的 

正确的是酱紫的