以Vue Js爲指令的Select2

我一直在關注vue js wrapper component example.我試圖改變這種工作方式，以允許我將v-select2指令添加到常規選擇框，而不必爲每個指令創建模板和組件。我有一個JS Bin這裏顯示使用該組件。以Vue Js爲指令的Select2

組件html如下（在JS中設置選項）。

<div id="app"></div> 

    <script type="text/x-template" id="demo-template"> 
    <div> 
     <p>Selected: {{ selected }}</p> 
     <select2 :options="options" v-model="selected"> 
     <option disabled value="0">Select one</option> 
     </select2> 

     <p>Selected: {{ selected2 }}</p> 
     <select2 :options="options" v-model="selected2"> 
     <option disabled value="0">Select one</option> 
     </select2> 

     <p>Selected: {{ selected3 }}</p> 
     <select2 :options="options" v-model="selected3"> 
     <option disabled value="0">Select one</option> 
     </select2> 
    </div> 
    </script> 

    <script type="text/x-template" id="select2-template"> 
    <select> 
     <slot></slot> 
    </select> 
    </script>

隨着JS如下：

Vue.component('select2', { 
    props: ['options', 'value'], 
    template: '#select2-template', 
    mounted: function() { 
    var vm = this 
    $(this.$el) 
     .val(this.value) 
     // init select2 
     .select2({ data: this.options }) 
     // emit event on change. 
     .on('change', function() { 
     vm.$emit('input', this.value) 
     }) 
    }, 
    watch: { 
    value: function (value) { 
     // update value 
     $(this.$el).val(value) 
    }, 
    options: function (options) { 
     // update options 
     $(this.$el).select2({ data: options }) 
    } 
    }, 
    destroyed: function() { 
    $(this.$el).off().select2('destroy') 
    } 
}) 

var vm = new Vue({ 
    el: '#app', 
    template: '#demo-template', 
    data: { 
    selected: 0, 
    selected2: 0, 
    selected3: 0, 
    options: [ 
     { id: 1, text: 'Hello' }, 
     { id: 2, text: 'World' } 
    ] 
    } 
})

我要的是像下面

<div id="app"> 

    <p>Selected: {{ selected }}</p> 
    <select name="selected1" id="selected1" class="select2" v-selectize v-model="selected"> 
     ... options here ... 
    </select> 

    <p>Selected: {{ selected2 }}</p> 
    <select name="selected2" id="selected2" class="select2" v-selectize v-model="selected2"> 
     ... options here ... 
    </select> 

    <p>Selected: {{ selected3 }}</p> 
    <select name="selected3" id="selected3" class="select2" v-selectize v-model="selected3"> 
     ... options here ... 
    </select> 

</div>

來源

2017-05-08 Pierce McGeough

您可以在幾乎你想用你的方式使用您的組件指令：

<select2 name="selected1" id="selected1" v-model="selected"> 
    <option disabled value="0">Select one</option> 
    <option value="1">Hello</option> 
    <option value="2">World</option> 
    </select2>

將name和id屬性傳輸到底層的select元素。

有沒有（好）的方法來做到這一點，這是一個指令，這是Vue 2中的一個有意設計決定。指令和Vue之間沒有溝通渠道，因爲在組件和它的父組件之間存在溝通渠道。一個指令不是一個子Vue，作爲一個組件，它是一種獨立處理一小塊DOM的方式。

我不認爲用指令而不是組件寫這個會有什麼特別的好處。

來源

2017-05-08 14:36:08

我試圖讓它作爲一個指令工作，所以我不必將它用作組件。 –

查看更新的答案。 –

以Vue Js爲指令的Select2

回答

相關問題