javascript - vue.js怎么将数据传递给方法？

问题描述

问 题

HTML:

<ul id="list">
    <li v-for="item in video">
        <a v-on:click="play({{item.url}})">点击播放：{{item.title}}</a>
    </li>        
</ul>

JS:

var data = {
    'video':[
        {'title':'aaaaaa','url':'http://www.abc.com/1.mp4'},
        {'title':'bbbbbb','url':'http://www.abc.com/2.mp4'},
        {'title':'cccccc','url':'http://www.abc.com/3.mp4'}
    ]
}
var list = new Vue({
    el: '#list',
    data: data,
    methods: {
        play: function(url) {
            console.log(url);
        }
    }
})

实际测试的时候,url并没有console出来，求解？

解决方案

写了个DEMO:https://jsfiddle.net/rainwsy/y3ctpotk/

你这个js数据视乎格式不对?

play($index) 会将当前的index索引值传给methods function

文档有讲过

在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：

这篇关于javascript - vue.js怎么将数据传递给方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！