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