Question

我刚刚开始使用Vue（看起来非常好）而且我遇到了一个问题。

我有一个bootstrap4下拉列表，我用它填充一个隐藏的表单（点击一个下拉项目将数据值保存到下面的表格中）。

这样做只是因为我无法按照我的意愿设置正常的选择/选项下拉列表。

这一切都运行正常，直到我尝试实现vue，因为我没有直接使用select组件，vue select documentation中提供的解决方案似乎不起作用。

非常感谢任何帮助。

提前致谢

HTML

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle device-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        All Devices
    </button>
    <div class="dropdown-menu" aria-labelledby="device-dropdown">
        <a class="dropdown-item" href="#" data-value="all">All Devices</a>
        <a class="dropdown-item" href="#" data-value="imac">iMac</a>
        <a class="dropdown-item" href="#" data-value="macbook">MacBook</a>
        <a class="dropdown-item" href="#" data-value="ipad">iPad</a>
        <a class="dropdown-item" href="#" data-value="iphone">iPhone</a>
    </div>

    <select name="device" class="hidden-device-dropdown">
        <option></option>
    </select>
</div>

JS

// copies the selected dropdown element into a hidden select in the form 
$('.dropdown-menu').click(function (e) {
    e.preventDefault();
    // change button text to selected item
    var selected = $(e.target);
    $(".device-dropdown").text($(selected).text());

    // change option value (inside select) to selected dropdown
    var form = $("select.hidden-device-dropdown").children("option");
    $(form).val(selected.data("value"));
});

编辑：看起来像v-on:click="device = '...'"可能会让我获得我所追求的功能，这是一个很好的方法吗？似乎重复了很多代码

Answer 1

我会建议一个组件。

Vue.component("bs-dropdown",{
  props:["options", "value"],
  template:`
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" 
            :class="id" 
            ref="dropdown"
            type="button" 
            data-toggle="dropdown" 
            aria-haspopup="true"
            aria-expanded="false">
      {{selected.text}}
    </button>
    <div class="dropdown-menu" :aria-labelledby="id">
      <a class="dropdown-item"  
         href="#" 
         v-for="option in options" 
         @click="selected = option">
        {{option.text}}
      </a>
    </div>
  </div>
  `,
  computed:{
    selected:{
      get() {return this.value},
      set(v){this.$emit("input", v)}
    },
    id(){
      return `dropdown-${this._uid}`
    }
  },
  mounted(){
    $(this.$refs.dropdown).dropdown()
  }
})

此组件包含引导功能，这是您在与外部库集成时通常要执行的操作。

像这样使用它：

<bs-dropdown :options="devices" v-model="selected"></bs-dropdown>

这是codepen demonstrating它的实际效果。

如果/当您需要该值，而不是将其复制到隐藏选择时，该值是与v-model绑定的数据属性。你可以随意使用它。

Vue在boostrap下拉列表中选择样式功能

1 个答案: