c***@163.com
c***@163.com
  • 发布:2018-09-07 11:05
  • 更新:2018-09-07 12:20
  • 阅读:3483

关于onclick传参数的问题

分类:HTML5+

我用onclick 点击 传递id 然后跳到详情页 。 如下代码,我用vue获取id 以下两种方法都获取不到,输出的是{{list.id}} 跟list.id 。知道的说下怎么解决 或者有没有更好的传参数的方法

<li class="mui-table-view-cell mui-media" v-for="list in goodslist">                                      
    <img class="mui-media-object mui-pull-left goods_img" onclick="jumpToDetail('{{list.id}}')" src="{{list.fileName}}" onerror="this.src='../../images/default.png'"/>  
    <div class="mui-media-body goods_content">  
        <h5 class="mui-ellipsis-2" onclick="jumpToDetail(list.id)">{{list.name}}</h5>  
        <p class="price">&yen; {{list.price}}</p>  
            <div class="goods_nub">  
                        <span class="stock">库存:{{list.stock}}</span>  
                        <em class="sales">销量:{{list.salesVolume}}</em>  
              <span class="more"><i></i><i></i><i></i></span>  
          </div>  
    </div>                                    
</li>
function jumpToDetail(id){  
    console.log(id);  
    mui.openWindow({  
        url: 'detail.html',  
        id:'detail',  
        extras:{  
         id:id  
        }  
    })  
}
2018-09-07 11:05 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

既然已经用 Vue 了,建议统一走 Vue 的逻辑。另外目前 Vue 已经不推荐使用 {{}} 这种方式来动态绑定数据了,如果你用的是 Vue 1.0 那另说。

下面提供一个简单的例子,仅供参考,还是建议多补充学习下 Vue 的相关知识。

<!DOCTYPE html>  
<html>  

<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <title></title>  
</head>  

<body>  
    <div id="app">  
        <ul>  
            <li v-for="item in list" @click="getInfo(item.id)">{{item.value}}</li>  
        </ul>  
    </div>  
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>  
    <script type="text/javascript">  
        var vm = new Vue({  
            el: '#app',  
            data: function () {  
                return {  
                    list: [{  
                        id: 1,  
                        value: 'item1'  
                    }, {  
                        id: 2,  
                        value: 'item2'  
                    }, {  
                        id: 3,  
                        value: 'item3'  
                    }]  
                }  
            },  
            methods: {  
                getInfo: function (id) {  
                    console.log(id)  
                }  
            }  
        });  
    </script>  
</body>  

</html>
  • c***@163.com (作者)

    谢谢,我再好好看下vue

    2018-09-07 14:17

该问题目前已经被锁定, 无法添加新回复