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>

原文由 Mike Thrussell 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 nirazul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

受@nirazul 的回答启发， 检索数据属性：

HTML：

 <ul>
    <li
            v-for="style in styles"
            :key="style.id"
            @click="doFilter"
            data-filter-section="data_1"
            :data-filter-size="style.size"
    >
        {{style.name}}
    </li>
</ul>

JS：

 export default {
    methods: {
        doFilter(e) {
            let curTarget = e.currentTarget;
            let curTargetData = curTarget.dataset;
            if (curTargetData) {
                console.log("Section: " + curTargetData.filterSection);
                console.log("Size: " + curTargetData.filterSize);
            }
        }
    }
}

原文由 Maroun Melhem 发布，翻译遵循 CC BY-SA 4.0 许可协议