vue.js :scr 数据绑定

Question

我像想用vue搭建一个关于音乐播放器的功能 但是其中上一首 下一首则是用数组循环出来

数组中存放着我的本地路径如

new Vue({

    el:"body",

    data:{

        arr: [{ name: 'music/ttdd.mp3',//这是路径

             singer: 'xxxxxxx'},,

           { name: 'music/xxxxxxxx.mp3',

             singer: 'xxxxx'

          }],

          index:0,

          music:""

    },

    methods:{

        next:(){//这是我点击下一首的函数

            this.index++

            if(this.index>this.arr.length-1){

                this.index=0

            }

            this.music=this.arr[this.index].name

        }

    }

})

但是我页面渲染的时候是这样写的

//以前当是数组的时候我是这样写的

<audio autobuffer v-for=“i in arr” :src=['path/'+i.name] autoloop loop controls v-el:audio></audio>

//这样是可以使用的但是只要是单个数据时

<audio autobuffer :src=['path/'+music] autoloop loop controls v-el:audio></audio>

然后:src=music也是报错的

究竟怎样才能把数据绑定到元素的属性上呢

Answer 1

我给你改写一下吧,也可以吧src上绑定的东西搞成一个计算属性，方便其他位置用new Vue({&nbsp; &nbsp; el:"body",&nbsp; &nbsp; data:{&nbsp; &nbsp; &nbsp; &nbsp; arr: [{ name: 'music/ttdd.mp3',//这是路径&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;singer: 'xxxxxxx'},,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{ name: 'music/xxxxxxxx.mp3',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;singer: 'xxxxx'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; index:0&nbsp; &nbsp; },&nbsp; &nbsp; methods:{&nbsp; &nbsp; &nbsp; &nbsp; next:(){//这是我点击下一首的函数&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.index++&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(this.index>this.arr.length-1){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.index=0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }})//这样是可以使用的但是只要是单个数据时<audio autobuffer :src="'path/'+arr[index].name" autoloop loop controls v-el:audio></audio>