How to target specific clicked component and set the state for the specific component with Vue.js?

Question

I have a dropdown component, which I use several times on a page. Now this dropdown contains a number of options and the user has the possibility to select multiple options.

However, the page refreshes after choosing an option, which closes the dropdown. The user then has to open the dropdown again to choose a 2nd option.

Now I want to make sure that the clicked dropdown remains open after choosing an option or refreshing the page.

The dropdown is displayed based on the this.show value. If I set this directly to true in mounted(), all dropdowns are shown. I just want the dropdown that was already open to open after reloading the page.

Dropdown component:

<template>
  <div
    v-on-click-outside="collapse"
    class="dropdown"
    :class="{ expanded: show, collapsed: !show}"
  >
    <div
      class="dropdown__info"
      @click="onClick()"
    >
      <span>
        {{ getFilterTitle() }}
      </span>
    </div>
    <transition name="expand">
      <div
        v-if="show"
        class="dropdown__options"
      >
        <template v-for="(option, m) in filteredOptions">
          <template v-else>
            <div
              :key="option.value"
              :class="{
                selected: isSelected(option)
              }"
              :show="m < 10"
              class="dropdown__options__item"
              :title="option.title"
              @click="onSelect(option)"
            >
                {{ option.label }}
            </div>
          </template>
        </template>
      </div>
    </transition>
  </div>
</template>

Functions:

data() {
    return {
        show: false
    };
},
methods: {
    onClick() {
        if (this.show) {
         this.collapse();
        } else {
         this.expand();
        }
    },
    expand() {
        this.show = true;
    },
    collapse() {
        if (!this.show) {
         return;
        }
        this.show = false;
    },
    onSelect(option) {
        const selectedIndex = this.selectedList.findIndex(
        (selectedOption) => option.value === selectedOption.value,
        );

        const clonedSelectedList = JSON.parse(JSON.stringify(this.selectedList));

        if (selectedIndex > -1) {
         clonedSelectedList.splice(selectedIndex, 1);
        } else {
         clonedSelectedList.push(option);
        }

        this.selectedList = [...clonedSelectedList];

        this.onChange({
         title: this.title,
         name: this.name,
         value: this.selectedList,
        });
    }
}

How can I make sure to keep the dropdown open/shown after selecting an option, so that the user can select multiple options without opening the dropdown again?

Answer 1

If it's strictly necessary to keep dropdown state on page reload and if you have multiple dropdowns, then use localStorage. There you can store the id of opened dropdown and his selected options.

You can store in JSON format, below is parsed version

[
  {
    id: "html_el_id",
    selected: [ 
      "option1", 
      "option2" 
    ]
  }
]

You have to decide how to generate id for dropdown, then sync state from localStorage with component state based on id.