Utilisation de l'URL AJAX dynamique pour le composant d'enveloppe Vue Select2

Question

J'ai modifié le Wrapper Component Example dans la documentation de VueJS pour inclure l'option de source de données AJAX. Here est mon code.

Cependant, je voudrais mettre l'ajaxurlpropriété de mon composant select2 dynamiquement de préférence comme celui-ci,

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

Comment pourrais-je faire cela?

Answer 1

1. Ajouter la propriété:

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

2. Déplacer les options AJAX soit à une variable portée en dehors du composant de select2 ou un élément de données de ce composant:

   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. utilisation cette variable lors de l'initialisation du select2:

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

4. Ajouter un guetteur pour url:

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

5. Définissez la propriété:

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

   où url est défini dans les données objet de l'application.

Voir une démonstration dans this plunker example.