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 上遇到了类似的问题，不得不使用 paramwatchers 来检查选项何时更新：

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