使用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();
错误是这样的
正确的是酱紫的
阅读全文
0 0
- 使用vue-aplayer插件时出现的问题
- vue音乐播放器插件vue-aplayer的配置及其使用
- vue+Framework7+echarts时使用tab组件出现的问题
- WPF使用迅雷Aplayer
- vue插件:vue-resource的使用笔记
- vue插件:vue-resource的使用笔记
- vue 中使用better-scroll插件时无法滚动问题
- 处理vue中使用Axios调用接口时出现的ie数据处理问题
- sublime Text 3中安装vue高亮插件以及解决可能出现的问题
- 使用vue时遇到的问题总结
- 使用时间插件时出现的问题
- vue.js中使用vueResource向后台请求数据时出现跨域访问失败的问题
- vue轮播图插件vue-awesome-swiper的使用
- vue轮播图插件vue-awesome-swiper的使用
- vue.js国际化 vue-i18n插件的使用
- vue轮播图插件vue-awesome-swiper的引入及使用
- Vue中better-scroll插件的使用
- 我的vue插件使用整理
- vue-cli引入jquery、bootstrape
- Jzoj3555 树的直径
- python入门第二天——数据结构
- iOS Reveal4.0.app和Xcode9快速集成指南-不用繁琐设置项目
- 线程interrupt方法测试
- 使用vue-aplayer插件时出现的问题
- UVALive6497 Digit Sum【贪心】
- 第三次学习总结
- python_7
- RESTful的一些总结
- 在Eclipse中JavaEE项目误删Servers后的恢复办法
- git无法pull仓库
- swing图形设计连接mysql数据库的步骤
- Python3