Как отображать дополнительный контент только в одном из экземпляров вложенного компонента?

Question

[dimakal1]

Есть Vue экземпляр и компонент. Они описаны в одном .js файле. Этот компонент используется на странице 2 раза, внутри него есть раскрывающийся по клику список, заполненный элементами из массива.
Список раскрывается при помощи функции меняющей значение свойства.
Также есть свойство, отвечающее за индекс компонента, по которому кликнули.
Нужно сделать так, чтобы если в одном экземпляре компонента список открыт, в другом он закрывался.
Проблема в том, что одно свойство записано в корневом экземпляре Vue, а второе в компоненте. Непонятно, как написать условие, которое будет связывать свойства из компонента и корня вью.

Vue.component('shs-pump', {
   template: '#pump-template',
    props: ['pump', 'activeIndex', 'activePumpIndex', 'hidden1'],
    delimiters: ['${', '}'],
   data: function() {
       return {
           typeActiveIndex: -1,
           hiddenTypesIndex: 2,
       }
   },
    methods: {
        toggleTypes: function (types) {
            return this.hiddenTypesIndex === 2 ? this.hiddenTypesIndex = types.length : this.hiddenTypesIndex = 2;
        },
        toggleTypeActiveIndex(i, activePumpIndex) {
            this.$emit('set-active-pump-index', activePumpIndex);
            const setSubtypesPosition = () => {
                Vue.nextTick(() => {
                    var types = document.querySelector('.types');
                    var type = Array.prototype.slice.call(document.querySelectorAll('.type'))[i];
                    var subtypes = document.querySelector('.subtypes');
                    var pumpDescription = document.querySelector('.b-pump__description');

                    if (subtypes.offsetHeight > types.offsetHeight) {
                        pumpDescription.style.marginBottom = subtypes.offsetHeight - (types.offsetHeight - type.offsetHeight * (i + 1) ) + 'px';
                    }
                    if (subtypes.offsetHeight < types.offsetHeight && subtypes.offsetHeight < (types.offsetHeight - type.offsetHeight * (i))) {
                        pumpDescription.style.marginBottom = '0';
                    }
                    else if (subtypes.offsetHeight < types.offsetHeight && subtypes.offsetHeight > (types.offsetHeight - type.offsetHeight * (i))) {
                        pumpDescription.style.marginBottom = subtypes.offsetHeight - (types.offsetHeight - type.offsetHeight * (i + 2) ) + 'px';
                    }


                });
            };
            if (this.typeActiveIndex === i) {
                this.typeActiveIndex = -1;
                document.querySelector('.b-pump__description').style.marginBottom = '0';
            } else {
                this.typeActiveIndex = i;
                setSubtypesPosition();
            }
        },
    }
});

const vueSHS = new Vue({
    el: "#vue-shs",
    delimiters: ['${', '}'],
    data: {
        offers: window.vueShsPageOffers,
        pumps: window.vueShsPagePumps,
        activeIndex: '',
    },
    methods: {
        setActivePumpIndex(index) {
            this.activeIndex = index;
            // if (this.activeIndex != index) {
            //     this.hiddenTypesIndex == 2
            // }
        },
    }
});

То есть если hiddenTypesIndex != 2 && activeIndex == 0 в одном компоненте, он hiddenTypesIndex = 2 в другом (activeIndex == 1)

Comments

[alex]

меньше писанины, больше кода

Answer 1

[0xD34F]

Делаете у компонента параметр, отвечающий за раскрытость списка. При необходимости список открыть делаете emit. В родителе по событию устанавливаете индекс открытого компонента (он же и используется при передаче параметра открытости списка - проверяете, что равен индексу текущего экземпляра). Всё.