即使调用切换功能，vue 模板上的下拉菜单也不起作用

Question

我正在 vue 项目上尝试一个简单的下拉菜单。但是当我点击它时，下拉列表不会下降。我已将控制台放在函数内。该消息显示在控制台上，这意味着正在调用该函数。但它不起作用。

<template>
  <div class="dropdown">
    <button @click="toggleDropdown" class="dropdown-button">
      {{ selectedOption || "Select an option" }}
    </button>
    <ul v-if="isOpen" class="dropdown-menu">
      <li v-for="option in options" :key="option" @click="selectOption(option)">
        {{ option }}
      </li>
    </ul>
  </div>
</template>


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

<style scoped>
.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;
}
</style>

当我检查控制台时，看起来完全没问题，点击函数如图所示被调用。

Answer 1

做得很好。下拉列表中的元素是否会落在其他 HTML 元素下方？