I need help with changing the color of a div when it is clicked.
Here's how the div is structured:
<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">foot;{{monomer.symbol}}</p>
</div>
</li>
This function is triggered on click event:
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)"
}
The color changes upon click but reverts back to original when mouse leaves the div. How can I make the color stay changed?
Edit:
monomerButton: {
backgroundColor: getNodeColor(this.monomers[0].polymerType, this.monomers[0].naturalAnalog)
}
The background color depends on the type of monomer used.
Second edit: The component (let's call it A) is nested within another component (B). Component B structure:
<component B>
<ul>
<li v-for="monomer type in monomer types">
<component A :monomers="monomers of that type"></component A>
</li>
<ul>
</component B>
For each monomer type (e.g., Glycine + analogs), a separate component A is created. Component A generates square div boxes with text for each analog. Thus,
getNodeColor(this.monomers[0].polymerType, this.monomers[0].naturalAnalog)