vue.js 参考 div v-on:click 上的 ID

Question

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

<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

Answer 2

只是为了突出显示同一问题的所选答案之外的另一个选项，我在记录上有一个删除按钮，并希望使用该记录的唯一 ID（一个数字）执行操作。我可以像以前一样做选择的答案：

<button :id="record.id" @click="del">&times;</button>

这留下了不幸的现实，即我的 del 函数需要将 id 属性从 javascript 事件中拉出，这更多是关于 API（DOM) 比我的域（我的应用程序）。此外，使用数字作为元素 id 并不理想，如果我在一个视图中多次使用它可能会导致冲突。所以这里有一些同样清楚的东西，可以避免任何未来的混淆：

<button @click="()=>del(record.id)">&times;</button>

methods: {
  del(id) {
    fetch(`/api/item/${id}`, {method:"DELETE"})
  }
}

你看，现在我的 del 函数采用记录 ID 而不是事件，简化了事情。

~~请注意，如果你做错了，你将立即调用你的删除函数，这不是你想要的。不要这样做：~~~~

~~<button @click="del(record.id)">×</button>~~

~~如果您最终这样做，Vue 将在每次呈现此 html 片段时调用 del 函数。使用匿名函数 ()=>del(record.id) 将 return 一个准备好在点击事件发生时执行的函数。~~

实际上@nirazul 证明这很好。不确定我的问题是什么。

Answer 3

受@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);
            }
        }
    }
}

vue.js 参考 div v-on:click 上的 ID

vue.js reference div id on v-on:click

onclick

vue.js