Раскрывающийся список шаблона vue не работает, даже если вызывается функция переключения ⇐ CSS

[Anonymous]

Я пробую простой раскрывающийся список в проекте vue. Но раскрывающийся список не открывается, когда я нажимаю на него. Я поместил консоль внутри функции. Сообщение отображается на консоли, что означает вызов функции. Но это не работает.



{{ selectedOption || "Select an option" }}

• {{ option }}

export default {
name: "DropDown", // Adding name to the component
data() {
return {
isOpen: false,
selectedOption: null,
options: ["Option 1", "Option 2", "Option 3"],
};
},
methods: {
toggleDropdown() {
console.log("Button clicked");
this.isOpen = !this.isOpen;
},
selectOption(option) {
this.selectedOption = option;
this.isOpen = false;
},
},
};



.dropdown {
position: relative;
display: inline-block;
}

.dropdown-button {
padding: 10px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}

.dropdown-menu {
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ddd;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}

.dropdown-menu li {
padding: 10px;
cursor: pointer;
}

.dropdown-menu li:hover {
background-color: #ddd;
}



Подробнее здесь: https://stackoverflow.com/questions/790 ... -is-called