Есть один parent компонент, в котором содержатся дочерние компоненты child.*
parent
child
child
child
...
child
В каждом child есть поле и при клике по этому полю открывается tooltip описание. Если перекликать все филды, то пооткрываются все тултипы. Я хочу каким то образом сделать так, чтобы при клике по одному филду - кагисились все, ктоорые расположены в братских элементах.
Код: Выделить всё
<template>
<div>
<div @click="handleEvent($event)" @mouseleave="turnOffCommix">
<slot></slot>
</div>
<div class="change-help"
:class="{'change-help__no-bg': !showIcon}"
:style="helpStyle"
@click="handleEvent($event)"
>
<template v-if="showIcon">?</template>
<div class="change-hint" :style="hintStyle">
<p class="change-hint__text">
{{ msg }}
</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
showIcon: {
default: true,
type: Boolean
},
msg: {
default: 'empty',
type: String
}
},
data () {
return {
showHelp: false
};
},
methods: {
handleEvent (event) {
this.turnOnCommix();
},
turnOnCommix: function(){
this.showHelp = true;
},
turnOffCommix: function(){
this.showHelp = false;
}
},
computed: {
hintStyle: function () {
return {opacity: this.showHelp ? 1 : 0};
},
helpStyle: function () {
return {
overflow: this.showHelp ? 'visible' : 'transparent'
};
}
}
};
</script>