Estoy tratando de cambiar el color de un div cuando se hace clic en él.

esta es la estructura del div

 <li v-for="monomer in monomers"> <div :style="monomerButton" @mouseover="hover = true" @mouseleave="hover = false" @click="selectMonomer($event)" class="monomer-button"> <p class="monomer-symbol">{{monomer.symbol}}</p> </div> </li>

esta es la función que se llama cuando se llama al evento onclick

 selectMonomer(event) { // If the p element gets clicked, get the div that contains the p element let element = event.target.nodeName === "P" ? event.target.parentElement : event.target element.style.backgroundColor = "rgba(44, 224, 203, 0.5)" }

El color cambia y permanece así mientras mantengo el mouse sobre el div. Sin embargo, cuando el mouse abandona el div, el color vuelve a su color original. Al hacer clic en él nuevamente, se cambiará nuevamente, pero se revertirá cuando el mouse se vaya nuevamente.

¿Cómo consigo que el div mantenga el color?

Editar:

 monomerButton: { backgroundColor: getNodeColor(this.monomers[0].polymerType, this.monomers[0].naturalAnalog) }

El color de fondo depende del tipo de monómero que sea.

Edit2: todo el componente (llamémoslo componente A) está en un bucle for anidado dentro de un componente diferente (componente B). el componente B se parece a esto:

 <component B> <ul> <li v-for="monomer type in monomer types"> <component A :monomers="monomers of that type"></component A> </li> <ul> </component B>

entonces, para cada tipo de monómero, como Glicina + análogos de glicina, cisteína + análogos de cisteína, se crea un componente. Este componente (componente A) crea un pequeño div cuadrado con texto para cada análogo. Esta es la razón por la que getNodeColor(this.monomers[0].polymerType, this.monomers[0].naturalAnalog) puede simplemente tomar el primer elemento porque todos los divs en una sola instancia del componente A deben tener el mismo color.