select2ディレクティブでvue.jsメソッドを使用

Question

jQueryプラグインを使用する新しいディレクティブを作成しましたSelect2とvue.jsをvue.js example pageに書き留めました。

しかし、私は選択したオプションの値を出力したくありません。選択内容を保存するには、カスタムメソッドcreateを@changeイベントにバインドしようとします。

ディレクティブの中で、Select2は更新中にselect入力フィールドのchangeイベントをトリガーしますが、それでも私のカスタムメソッドは呼び出されません。

隠された魔法はありますか？私はvue.jsのソースコードを読もうとしましたが、正しい方向に私を置く何かを見つけることができません。

Vue.directive('select', { 
 
    twoWay: true, 
 
    priority: 1000, 
 

 
    params: ['options'], 
 

 
    bind: function() { 
 
    var self = this; 
 

 
    $(this.el) 
 
     .select2({ 
 
     data: this.params.options 
 
     }) 
 
     .on('change', function() { 
 
     self.set(this.value); 
 
     }); 
 
    }, 
 

 
    update: function(value) { 
 
    $(this.el).val(value).trigger('change'); 
 
    }, 
 

 
    unbind: function() { 
 
    $(this.el).off().select2('destroy'); 
 
    } 
 
}); 
 

 
var vm = new Vue({ 
 
    el: '#items', 
 
    data: { 
 
    items: [], 
 
    new_item: '', 
 
    options: [{ 
 
     id: 1, 
 
     text: 'First' 
 
    }, { 
 
     id: 2, 
 
     text: 'Second' 
 
    }, { 
 
     id: 3, 
 
     text: 'Third' 
 
    }, { 
 
     id: 4, 
 
     text: 'Fourth' 
 
    }, { 
 
     id: 5, 
 
     text: 'Fifth' 
 
    }] 
 
    }, 
 
    methods: { 
 
    create: function() { 
 
     var self = this, 
 
     label = ''; 
 

 
     this.options.map(function(item) { 
 
     if (self.new_item == item.id) 
 
      label = item.text; 
 
     }); 
 

 
     var obj = { 
 
     id: self.new_item, 
 
     name: label 
 
     }; 
 

 
     this.items.push(obj); 
 
     this.new_item = ''; 
 
    } 
 
    } 
 
});

select { 
 
    min-width: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<div id="items"> 
 
    <ul> 
 
    <li v-for="item in items">{{ item.id }} &ndash; {{ item.name }}</li> 
 
    </ul> 
 
    <select v-select="new_item" @change="create" :options="options"> 
 
    <option value="0">--Select--</option> 
 
    </select> 
 
</div>

Answer 1

たぶん、あなたはこのようなあなたのNEW_ITEM変数にウォッチャを追加することができます。したがって、new_itemの値が変更されたときに何かできます。 私はまだselect2の変更メソッドの後に@changeをトリガーする方法を探していますが、今は何の手がかりもありません。

Vue.directive('select', { 
 
    twoWay: true, 
 
    priority: 1000, 
 

 
    params: ['options'], 
 

 
    bind: function() { 
 
    var self = this; 
 

 
    $(this.el) 
 
     .select2({ 
 
     data: this.params.options 
 
     }) 
 
     .on('change', function() { 
 
     self.set(this.value); 
 
     }); 
 
    }, 
 

 
    update: function(value) { 
 
    $(this.el).val(value).trigger('change'); 
 
    }, 
 

 
    unbind: function() { 
 
    $(this.el).off().select2('destroy'); 
 
    } 
 
}); 
 

 
var vm = new Vue({ 
 
    el: '#items', 
 
    data: { 
 
    items: [], 
 
    new_item: '', 
 
    options: [{ 
 
     id: 1, 
 
     text: 'First' 
 
    }, { 
 
     id: 2, 
 
     text: 'Second' 
 
    }, { 
 
     id: 3, 
 
     text: 'Third' 
 
    }, { 
 
     id: 4, 
 
     text: 'Fourth' 
 
    }, { 
 
     id: 5, 
 
     text: 'Fifth' 
 
    }] 
 
    }, 
 
    methods: { 
 
    create: function() { 
 
     var self = this, 
 
     label = ''; 
 

 
     this.options.map(function(item) { 
 
     if (self.new_item == item.id) 
 
      label = item.text; 
 
     }); 
 

 
     var obj = { 
 
     id: self.new_item, 
 
     name: label 
 
     }; 
 

 
     this.items.push(obj); 
 
     this.new_item = ''; 
 
    } 
 
    }, 
 
    watch:{ 
 
    new_item:function(){ 
 
     alert(this.new_item); 
 
    } 
 
    } 
 
});

select { 
 
    min-width: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<div id="items"> 
 
    <ul> 
 
    <li v-for="item in items">{{ item.id }} &ndash; {{ item.name }}</li> 
 
    </ul> 
 
    <select v-select="new_item" @change="create" :options="options"> 
 
    <option value="0">--Select--</option> 
 
    </select> 
 
</div>