How to reference the element id in VUE :class-CodePudding

I have several divs, which I'm not going to put in v-for, but still need to unique reference them. For @click id attribute works well.

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

But is there a way I can use element id, without click event, as reference in called function, so setAreaStyle would received 'CAR' as argument?

<div v-bind: id="CAR">

CodePudding user response：

Use $event.target.id

<div : 
  @click="setFocus($event)" 
  id="CAR"
>

CodePudding user response：

I guess the id you'll use will come from the v-for item, no ? You can then use it in both places:

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

Side note: the name setAreaStyle is strange (seems it will do some side effects), you should only get something here, and it is the class name => getClass would make more sense. Or :style="getStyle(item.id)" if you want to add inline CSS