onclick - vue.js 在 v-on :click 上引用 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 Documentation - v-on