Changing properties in Vue components?

Question

Vue.js

There is a Vue instance and a component. They are described in one .js file. This component is used on the page 2 times, inside it there is a drop-down list filled with elements from the array.
The list is expanded using a function that changes the value of a property.
There is also a property responsible for the index of the clicked component.
It is necessary to make it so that if the list is open in one instance of the component, it closes in another.
The problem is that one property is written in the root Vue instance, and the second in the component. It is not clear how to write a condition that will bind properties from the component and the view root.

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
            // }
        },
    }
});

That is, if hiddenTypesIndex != 2 && activeIndex == 0 in one component, it's hiddenTypesIndex = 2 in another (activeIndex == 1)

Answer 1

You make a parameter for the component that is responsible for the disclosure of the list. If you need to open the list, do emit. In the parent, by event, set the index of the open component (it is also used when passing the open list parameter - you check that it is equal to the index of the current instance). Everything .