2

私は vue を初めて使用し、 http: //vuejs.org/examples/select2.htmlの「カスタム ディレクティブ」に従いました。

これは、1 つのアイテムのみを選択する場合はうまく機能しますが、複数のアイテムを選択する場合は、最初のアイテムのみを渡します。選択したすべての値を渡す必要があります。

ここで利用可能なコードを表示するjsfiddleをセットアップしました。 https://jsfiddle.net/f3kd6f14/1/

ディレクティブは次のとおりです。

 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')
    }

どんな助けでも大歓迎です。

4

2 に答える 2

7

this.valueSelect2 が複数値モードの場合、期待どおりに機能しません (詳細はこちら: Get Selected value from Multi-Value Select Boxes by jquery-select2? )。

これを試してください（ここで作業フィドル：https://jsfiddle.net/02rafh8p/）：

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($(self.el).val()) // Don't use this.value
                })
    },
    update: function(value) {
        $(this.el).val(value).trigger('change')
    },
    unbind: function() {
        $(this.el).off().select2('destroy')
    }
})

var vm = new Vue({
    el: '#el',
    data: {
        selected: [], // Result is an array of values.

        roles : [
            { id: 1, text: 'hello' },
            { id: 2, text: 'what' }
        ]
    }
})
于 2016-02-02T13:34:08.763 に答える
-1

Vue 2 で、すべての select2 値を変更時に取得するには:

これを変える：

.on('change', function () {
  self.$emit('input', this.value); // Don't use this.value
});

これに：

.on('change', function () {
  self.$emit('input', $(this).val());
});
于 2017-06-11T15:06:53.027 に答える