Как во vuejs при событии в изолированном компоненте — потушить свойство в братских компонентах на одном уровне?

Вопросы по вёрстке и JavaScript
Ответить
EVOSandru6
Сообщения: 573
Зарегистрирован: 2014.07.04, 13:33

Как во vuejs при событии в изолированном компоненте — потушить свойство в братских компонентах на одном уровне?

Сообщение EVOSandru6 » 2018.09.07, 15:28

Добрый день,

Есть один 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>

Ответить