我正在尝试在Vue中实现从头开始的自动完成，但是我有问题在下拉菜单中选择选项。我正在启用（shownig）这个下拉列表，在点击输入或用户输入时。然后，在输入之外的焦点上，我想摆脱下拉列表。但是，这意味着当我选择dropdown中的内容时，我将关闭dropdown，而不是触发selectoption。如何同时保持V-ON:focusout对input和@click=“selectoption（option）”对下拉选项？到目前为止，使selectoption起作用的唯一方法是删除focusout，这不是我想要的...

<template>
  <div>
    <input
      type="text"
      v-on:input="enableDropdown"
      v-on:click="enableDropdown"
      v-on:focusout="disableDropdown"
    />
    <div class="options-dropdown" v-if="showDropdown">
      <div
        class="option"
        v-for="option in options"
        :key="option"
        @click="selectOption(option)"
      >
        {{ option }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        "java",
        "c#",
        "c++"
      ],
      showDropdown: false,
    };
  },
  methods: {
    enableDropdown() {
      this.showDropdown = true;
    },
    disableDropdown() {
      this.showDropdown = false;
    },
    selectOption($event) {
      console.log($event);
    },
  },
};
</script>