Vue: v-on:click.self event not work

Created on 4 Feb 2016 · 7Comments · Source: vuejs/vue

v-on:click.self event not work

Source

loyalove

All 7 comments

Provide reproduction.

azamat-sharapov on 4 Feb 2016

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/api.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
    <style>

        body{
            padding-top:155px;
            background:#eee;
            color:#555;
        }

        .clear{
            clear:both;
        }

        .fa{
            font-size:1.5em;
        }

        .list{
            margin-top:5px;
            background:#fff;
        }

        .list .head{
            padding:3px 0;
        }

        .list .head .title{
            border-left:5px solid #990000;
            padding-left:5px;
            line-height:20px;
            font-size:16px;
            font-weight:bold;

        }

        .list .items{
           width:100%;
        }

        .list .items .item{
            float:left;
            width:33.33%;
            height:100px;
            line-height:100px;
            text-align:center;
            vertical-align:middle;
        }

        .list .items .item:hover{
            background:#990000;
            color:#fff;
        }

    </style>
</head>
<body style="display:none;">

    <div class="list">
        <div class="head border-t">
            <span class="title">推荐</span>
        </div>
        <ul class="items border-t">
            <li class="item" v-on:click.self="addItem"><i class="fa fa-plus fa-2x"></i></li>
        </ul>
        <div class="clear"></div>
    </div>

    <script type="text/javascript" src="script/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="script/vue.js"></script>

    <script type="text/javascript">

        var vm = new Vue({
            el:'body',
            data:{
                count:0
            },
            methods:{
                addItem:function(event){
                    var item = $(event.target).clone();
                    item.unbind().hide().html(++this.count);
                    $(event.target).before(item);
                    item.fadeIn();
                }
            },
            ready:function(){
                $('body').show();
            }
        });

    </script>
</body>
</html>

loyalove on 4 Feb 2016

v-on:click.self="addItem($event)"

xuanyan0x7c7 on 4 Feb 2016

$event is required？

loyalove on 4 Feb 2016

shouldn't be required:
http://vuejs.org/api/#v-on

paulpflug on 4 Feb 2016

Cannot reproduce. Your example is working as expected. Make sure you are using the latest version of Vue (.self is only supported in 1.0.16+). Reopen if you can provide an actual reproduction.