Использовать динамический URL AJAX для компонента-оболочки Vue Select2

Question

Я изменил Пример компонента Wrapper из документации VueJS, чтобы включить опцию источника данных AJAX. Вот мой код

Тем не менее, я хотел бы установить ajaxurl свойство моего компонента select2 динамически предпочтительно, как это,

<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. Добавьте наблюдателя для URL:

   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 определяется в объекте данных приложения.

Посмотрите демонстрацию в этом примере плунжера.