为 Vue Select2 包装器组件使用动态 AJAX URL

Question

我修改了Wrapper Component Example 从 VueJS 文档中包含 AJAX 数据源选项。 Here 是我的代码。

但是，我想动态设置我的select2组件的ajaxurl属性最好是这样，

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

我该怎么做？

Answer 1

1. 将属性添加到组件的props:

   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 在应用的 data 对象中定义。

在this plunker example 中查看演示。