Select2 и Vue Directive

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 была выполнена после ВЫБ.2 директивы поэтому варианты переменных всегда быть пустыми.

Как я могу получить всех пользователей через ajax (vue-resource) и после этого заполнить select2?

Answer 1

У меня была аналогичная проблема с выбор2, и пришлось использовать 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