vue.js在v-on上引用div id:单击

Question

使用v-on:click我想在Vue.JS中设置一个带有div的id的变量 - 我该如何引用它？

<div id="foo" v-on:click="select">...</div>

<script>
    new Vue({
        el: '#app',
        data: {
        },
        methods: {
            select: function(){
                divID = this.id // ??
                alert(divID)
            }
        }
    })
</script>

Answer 1

您可以使用事件对象扩展事件处理程序$event.这应该符合您的需求:

<div id="foo" v-on:click="select($event)">...</div>

该事件在javascript中传递:

export default {
    methods: {
        select: function(event) {
            targetId = event.currentTarget.id;
            console.log(targetId); // returns 'foo'
        }
    }
}

正如评论中所提到的$event,当使用它作为唯一参数时,并非绝对必要.这是一个很好的提醒,当明确地写它时,传递这个属性.

但是,没有人会阻止你写短文:

<div id="foo" @click="select">...</div>

请注意,$event添加其他参数时,该方法不会接收该对象.您需要在侦听器中处理它的位置显式添加它.任何参数顺序都可以:

<div id="foo" @click="select(bar, $event)">...</div>

要查找该v-on指令的更多选项,您可以查看vue文档中的相应条目:

Vue API - v-on