Below is a screenshot of my cart dropdown: https://i.sstatic.net/IdOZK.png
The issue I am facing is that the cart stays open even when I navigate to another page. I need it to close when I move to a different page. Below is my component code:
<template>
<div class="custom-select" :tabindex="tabindex" @blur="open = false">
<div class="selected" :class="{ open: open }" @click="open = !open">
{{ selected.name }}
</div>
<div class="items" :class="{ selectHide: !open }">
<div v-if="defaultValue != ''">{{ defaultValue }}</div>
<div v-for="(option, i) of options" :key="i"
@click=" selected = option; open = false; $emit('input', option);">
{{ option.name }}
</div>
</div>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array,
required: true,
},
defaultValue: {
type: String,
required: false,
default: "Choose an option",
},
tabindex: {
type: Number,
required: false,
default: 0,
},
},
data() {
return {
open: false,
selected: this.setDefaultValue(),
};
},
mounted() {
this.$emit("input", this.selected);
},
methods: {
setDefaultValue() {
if (this.defaultValue == '' && this.options.length > 0) {
return this.options[0];
}
return {name: this.defaultValue};
}
}
};
</script>
I welcome any suggestions or solutions to resolve this particular problem.