Vueブーストラップドロップダウンでスタイル機能を選択

Question

Vueを使い始めたばかりです（本当にうれしいです）。

私は隠しフォームを作成するために使用しているブートストラップ4のドロップダウンを持っています（ドロップダウンアイテムをクリックすると、下のフォームにデータ値が保存されます）。

これは、通常の選択/オプションのドロップダウンを私が望むように行うことができないためにのみ行われます。

私はvueを実装しようとするまで、これはうまくいきました。選択したコンポーネントを直接使用していないので、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にバインドされたデータプロパティです。あなたはそれを好きなだけ使うことができます。