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

来源:互联网 发布:淘宝退款不退货会怎样 编辑:程序博客网 时间:2024/05/16 07:26

刚刚接触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>

还是有问题,网上查过之后,是因为在执行了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();  

错误是这样的
这里写图片描述

正确的是酱紫的
这里写图片描述

原创粉丝点击