VUE:在onclick事件中更改颜色会在鼠标离开div时恢复

Question

我正在尝试更改单击div时的颜色。

这是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>

这是当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)"
}

只要我把鼠标放在div上，颜色就会改变并保持不变。不过，当鼠标离开div时，颜色会恢复到原来的颜色。再次单击它将再次更改它，但当鼠标再次离开时会立即返回。

如何使div保持颜色？

编辑：

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

背景颜色取决于单体的种类。

第2版：整个组件(让我们称之为组件A(位于不同组件(组件B(内部的嵌套for循环中。组件B看起来像这样：

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

因此，对于每种单体，如甘氨酸+甘氨酸类似物、半胱氨酸+半胱氨酸类似物，都会产生一种成分。这个组件(组件A(为每个模拟创建一个正方形的小div，其中包含文本。这就是为什么CCD_ 1可以只取第一个元素，因为组件a的单个实例中的所有div都需要是相同的颜色。

Answer 1

所以，多亏了@Shoejep，我找到了答案。

// component A
mounted() {
this.monomers.forEach(monomer => {
monomer.selected = false
})
}

在安装的钩子中，我给每个单体一个"选定"的属性。当然，他们一开始都没有被选中。

// component A
<div :style="monomerButton(monomer)" @mouseover="hover = true" @mouseleave="hover = false" @click="selectMonomer(monomer)" class="monomer-button">
<p class="monomer-symbol">{{monomer.symbol}}</p>
</div>

我使：style属性使用getMonomerStyle()的retun值，该值定义为：

// component A
getMonomerStyle(monomer) {
return {
backgroundColor: monomer.selected ? "rgba(131, 222, 226, 0.8)" : getNodeColor(this.monomers[0].polymerType, this.monomers[0].naturalAnalog),
border: this.monomers[0].monomerType === "Terminal" ? "2px dashed" : "1px solid"
}
}

单击单体时，该单体会发射到父组件。这使得组分A的所有其它实例也知道选择哪种单体。

那么它只是简单地将所选单体的所选属性设置为true，并将之前所选的单体的选定属性设置为false。

if (this.previousSelected) {
this.previousSelected.selected = false
}
monomer.selected = true
this.previousSelected = monomer

Answer 2

您可以执行类似于我下面包含的片段的操作。

在每个单体上都有一个selected属性，然后在计算应该在div上的样式时，根据是否选择该单体进行计算。

这也将简化您提供的一些代码，因为如果您单击p元素，它将冒泡到div，并将单体设置为选中。

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: "#app",
data: {
monomers: [{
polymerType: "Test",
naturalAnalog: "Test",
symbol: "Test",
selected: false
},
{
polymerType: "Hello",
naturalAnalog: "Hello",
symbol: "Hello",
selected: false
},
{
polymerType: "World",
naturalAnalog: "World",
symbol: "World",
selected: false
}
],
hover: true
},
methods: {
getNodeColor: function(polymerType, naturalAnalog) {
return "lightblue";
},
selectMonomer: function(monomer) {
monomer.selected = !monomer.selected;
},
monomerButton: function(monomer) {
return `backgroundColor: ${monomer.selected ? "pink" : this.getNodeColor(monomer.polymerType, monomer.naturalAnalog)}`;
}
}
});

ul {
list-style: none;
padding: 0;
margin: 0;
}
li div {
padding: 8px;
}
li {
margin-bottom: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li v-for="monomer in monomers">
<div :style="monomerButton(monomer)" @mouseover="hover = true" @mouseleave="hover = false" @click="selectMonomer(monomer)" class="monomer-button">
<p class="monomer-symbol">{{monomer.symbol}}</p>
</div>
</li>
</ul>
</div>