Question

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

测试动态ID是否有误
测试了背tick是否令人困惑
将值直接放入语义下拉列表

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

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/

Answer 1

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

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

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

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

vuejs语义ui-下拉列表不显示在箭头上

1 个答案: