vue js语义用户界面-箭头单击时不显示下拉菜单答案

【问题标题】：vuejs semantic ui - drop down not displaying on arrow clickvue js语义用户界面-箭头单击时不显示下拉菜单
【发布时间】：2018-07-26 13:53:51
【问题描述】：

我遇到了一个问题，我的 vue 项目中的语义下拉菜单在单击箭头图标时不会激活，但在我单击元素的其余部分时会起作用。当我将下拉菜单设置为在悬停时激活时，下拉菜单也有效，但不是在点击时激活。我尝试过的解决方案：

测试动态 ID 是否有问题
测试了反勾号是否令人困惑
将值直接放入语义下拉菜单中

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

Dropdown.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: ""

这是上面的一个小提琴，但简化为使用更扁平的项目。但是问题没有重现:(

https://jsfiddle.net/eywraw8t/210520/

【问题讨论】：

我感觉箭头上有一个重叠的元素，但我不知道如何查找它，是什么导致它或如何修复它
从头开始，只是图标没有拉伸到右侧元素上的最后一个像素。所以我还是很困惑

标签： vuejs2 semantic-ui

【解决方案1】：

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

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

然后在 Vue 组件的方法部分：

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

【讨论】：