javascript - vue.js怎么将数据传递给方法?
ringa_lee
ringa_lee 2017-04-11 09:08:33
[JavaScript讨论组]

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出来,求解?

ringa_lee
ringa_lee

ringa_lee

全部回复(2)
迷茫

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

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

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

文档有讲过

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

PHP中文网

事件里不要花括号

<a v-on:click="play(item.url)">点击播放:{{item.title}}</a>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号