對Vue Select2包裝組件使用動態AJAX URL

Question

我修改了VueJS文檔中的Wrapper Component Example 以包含AJAX數據源選項。 Here是我的代碼。

不過，我想設置我的選擇2組件的ajaxurl財產動態最好是這樣，

<select2 :options="options" v-model="selected" url="dynamic-url-here"> 
    <option disabled value="0">Select one</option> 
</select2> 

我將如何做到這一點？

Answer 1

1. 添加屬性：

   Vue.component('select2', { 
       props: ['options', 'value', 'url'], 
   

2. 移動的AJAX選項或者與範圍SELECT2部件或該部件的一個數據元素之外的變量：

   Vue.component('select2', { 
       props: ['options', 'value', 'url'], 
       template: '#select2-template', 
       data: function() { 
        return { 
         ajaxOptions: { 
          url: this.url, 
          dataType: 'json', 
          delay: 250, 
          tags: true, 
          data: function(params) { 
           return { 
            term: params.term, // search term 
            page: params.page 
           }; 
          }, 
          processResults: function(data, params) { 
           params.page = params.page || 1; 
           return { 
            results: data, 
            pagination: { 
             more: (params.page * 30) < data.total_count 
            } 
           }; 
          }, 
          cache: true 
         } 
        }; 
       }, 
   

3. 使用初始化select2時的變量：

   mounted: function() { 
       var vm = this 
       $(this.$el) 
        .select2({ 
         placeholder: "Click to see options", 
         ajax: this.ajaxOptions 
        }) 
   

4. 添加一個觀察者的網址：

   watch: { 
       url: function(value) { 
        this.ajaxOptions.url = this.url; 
        $(this.$el).select2({ ajax: this.ajaxOptions}); 
       } 
   

5. 設置屬性：

   <select2 :options="options" v-model="selected" :url="url"> 
   

   其中url在對象的應用程序的數據定義。

請參閱this plunker example中的演示。