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

Posted 2023-02-22

【中文标题】为 Vue Select2 包装器组件使用动态 AJAX URL

【英文标题】：Use dynamic AJAX URL for Vue Select2 wrapper component

【发布时间】：2018-03-07 14:26:25

【问题描述】：

我修改了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>

我该怎么做？

【参考方案1】：

将属性添加到组件的props:

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

将 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
          
      ;
  ,

在初始化 select2 时使用该变量：

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

为 url 添加一个观察者：

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

设置属性：

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

url 在应用的 data 对象中定义。

在this plunker example 中查看演示。

【讨论】：

我通过将data-url 属性添加到<select2> 标记并使用vm.$el.dataset.url, 在我的组件中获取它找到了一个临时解决方法。太好了，谢谢。

它可以工作，但是只有在输入 3 个字符后才能调用 ajax @SAMOnela