CODEWITHSUNDEEP
vue.jsclassbindingvuejs3bind
codebot
codebot

Reputation: 697

Dynamically get the id of the element inside the class binding in Vue 3

I have a vue file with about 200 of these

<p id="2">blabla</p>
...

I can easily do find and replace from id=" to :class="{'activeClass': currentId == idClicked}" id=" and get this

<p :class="{'activeClass': currentId == idClicked}" id="2">blabla</p>
...

I get get the idClicked from the vue router, by checking the url during page load, but there is no way for me to know the currentId or pass it somehow in the class binding, because the HTML is static.

How can I dynamically get the element's id inside the class binding ?

Thank you

PS - I dont want to remove classes from all the elements and then add one class to one element, because that involves a big for loop and I want to avoid that.

PS regex issue enter image description here

Upvotes: 0

Views: 943

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Since the HTML content is static and you've a lot of content with a common pattern, and you try to replace <p id="index" with <p :class="{'activeClass': idClicked == index }" id="index", so you need to do this in VSCode by pressing Ctrl+H:

<p id="(.*)"

by

<p :class="{'activeClass': idClicked == $1 }" id="$1"

enter image description here

Upvotes: 2

Related Questions