Select2和Vue指令

Question

我正在集成一个jQuery select2插件，方法是将它封装在一个自定义指令中。

export default {

    data() {
        return {
            selected: null,
            options: []
        }
    },

    ready() {
    this.fetchUsers()
}

    methods: {
        fetchUsers: function () {
            this.$http({
                url: '/api/users/get-all',
                method: 'GET'
            }).then(function (response) {
                this.$set('options', response.data)
            }, function (response) {
                // error callback
            });
        }
    },

    directives: {
        select: {
            twoWay: true,
            priority: 1000,

            params: ['options'],

            bind: function () {
                var self = this;

                $(this.el)
                        .select2({
                            theme: "bootstrap",
                            closeOnSelect: true,
                            minimumInputLength: 3,
                            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')
            }
        }
    }

}

和HTML：

<select v-select="selected" :options="options"></select>

我尝试获取所有用户并将其设置为fetchUsers函数中的选项，但似乎fetchUsers函数是在select2指令之后执行的，因此选项变量始终为空。

那么，我如何让所有用户通过ajax (vue-resource)并在此之后填充到select2呢？

Answer 1

我对select2也有类似的问题，必须使用参数观察器来检查选项何时更新：

select: {
    twoWay: true,
    priority: 1000,

    params: ['options'],

    paramswatchers: {
         "options": function (val, oldVal) {
             $(this.el).select2({
                 data: val
             })
         }
    }

    bind: function () {
        var self = this;

        $(this.el).select2({
            theme: "bootstrap",
            closeOnSelect: true,
            minimumInputLength: 3,
            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')
    }
}

来源：https://vuejs.org/guide/custom-directive.html#params