Vuejs2 vuejs语义ui-箭头单击时不显示下拉列表

我面临这样一个问题：当单击箭头图标时，vue项目中的语义下拉列表不会激活，但当单击元素的其余部分时，该下拉列表会起作用。当我将下拉列表设置为悬停时激活，但不是单击时，下拉列表也可以工作。我尝试过的解决方案：

• 如果动态id有故障，则进行测试
• 测试背面的记号是否混淆了东西
• 将值直接放入语义下拉列表中

除了下拉列表“未激活”之外，下面的代码按预期工作，并将选定值带回父组件，并且可以显示

下拉列表。vue:

<template>
    <div class="ui selection dropdown" :id="`drop_${dropDownId}`">

        <input type="hidden" name="gender" v-model="selected">
        <i class="dropdown icon"></i>
        <div class="default text">Gender</div>
        <div class="menu">
            <div class="item" v-for="option in options" v-bind:data-value="option.value">
                {{ option.text }}
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    data: function () {
      return {
        selected: {}
      }
    },
    watch: {
        selected: function (){
          this.$emit("dropDownChanged", this.selected)
        }
    },
    props: {
      options: Array, //[{text, value}]
      dropDownId: String
    },
    mounted () {
      let vm = this;
      $(`#drop_${vm.dropDownId}`).dropdown({
            onChange: function (value, text, $selectedItem) {
              vm.selected = value;
            },
        forceSelection: false,
        selectOnKeydown: false,
        showOnFocus: false,
        on: "click"
          });
    }
  }
</script>

<vue-drop-down :options="dropDownOptions" dropDownId="drop1" @dropDownChanged="dropDownSelectedValue = $event"></vue-drop-down>

dropDownOptions: [
          { text: 'One', value: 'A' },
          { text: 'Two', value: 'B' },
          { text: 'Three', value: 'C' }
        ],
        dropDownSelectedValue: ""

这里是一个以上的小提琴，但简化为使用一个更平坦的项目。但是，问题不会重现：(

---

我不确定是什么原因导致了您的问题（Semantic Ui网站上的示例看起来类似），但有一个解决方法。对于您，箭头图标：

<i @click="toggleDropDownVisibility" class="dropdown icon"></i>

---

我有一种感觉，箭头上有一个重叠的元素，但我不确定如何寻找它，是什么导致它，或者如何修复它的裂缝，只是图标没有延伸到右边元素的最后一个像素。所以我仍然感到困惑

methods: {
  toggleDropDownVisibility () {
    $(`#drop_${this.dropDownId}`)
    .dropdown('toggle');
  }
},