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

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

Answer 3

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

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

不幸的是，我的del函数需要从javascript事件中提取id属性，这比我的域（我的应用程序）更多有关API（DOM）。另外，将数字用作元素id也不理想，如果我在视图中多次执行此操作，可能会导致冲突。因此，这里的内容很清楚，可以避免将来出现任何混乱：

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

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

您看到，现在我的del函数采用记录ID代替事件，从而简化了事情。

<罢工> 请注意，如果您做错了，您将立即调用您的delete函数，这不是您想要的。不要这样做：~~

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

~~如果最终这样做，每次渲染此html片段时，Vue都会调用del函数。使用匿名函数()=>del(record.id)将返回一个在单击事件发生时准备执行的函数。~~

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

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

3 个答案: