如何在VUE:class中引用元素id

Question

我有几个div，我不打算把它们放在v-for中，但仍然需要唯一引用它们。对于@click id属性，效果良好。

<div v-bind:class="setAreaStyle('CAR')" @click="setFocus($event)" id="CAR">

但是，有没有一种方法可以使用元素id，而不需要点击事件，作为被调用函数中的引用，这样setAreaStyle就会收到"CAR"作为参数？

<div v-bind:class="setAreaStyle(id)" id="CAR">

Answer 1

使用$event.target.id

<div :class="setAreaStyle($event.target.id)" 
@click="setFocus($event)" 
id="CAR"
>

Answer 2

我想您将使用的id将来自v-for项，不是吗？然后你可以在两个地方使用它：

<div
v-for="item in items"
:key="item.id"
:class="setAreaStyle(item.id)"
:id="item.id"
@click="setFocus($event)"
>

旁注：名称setAreaStyle很奇怪(似乎会有一些副作用(，这里应该只有get，它是类名=>CCD_ 6会更有意义。或者:style="getStyle(item.id)"，如果你想添加内联CSS