首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >对Vue Select2包装器组件使用动态AJAX

对Vue Select2包装器组件使用动态AJAX
EN

Stack Overflow用户
提问于 2017-09-26 11:24:05
回答 1查看 4.8K关注 0票数 1

我从包装组件示例文档中修改了VueJS,以包含AJAX数据源选项。这里是我的代码。

但是,我希望设置我的ajax url 属性的select2组件动态最好是这样,

代码语言:javascript
代码运行次数:0
运行
复制
<select2 :options="options" v-model="selected" url="dynamic-url-here">
  <option disabled value="0">Select one</option>
</select2>

我该怎么做?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-09-29 23:30:12

  1. 将该属性添加到组件的props中: Vue.component(‘select2 2’,{ props:'options','value','url',
  2. 将AJAX选项移动到select2组件之外的具有作用域的变量或该组件的数据元素: Vue.component(‘select2 2’,{ props:'options','value','url',模板:‘#select2 2-模板’,data: function() { ajaxOptions:{ url: this.url,dataType:'json',延迟: 250,标签: true,数据:函数(Params){返回{ term: params.term,// search页面: params.page };},processResults:函数(data,params) { params.page = params.page x= 1;返回{结果:数据,分页:{ more:(params.page * 30) < data.total_count } };},缓存: true };}
  3. 初始化select2时使用该变量: 挂载:函数(){ var vm =此$( this .$el) .select2({占位符:“单击查看选项”,ajax: this.ajaxOptions })
  4. 为url添加一个观察者: 观察:{ url:函数(值){ this.ajaxOptions.url = this.url;$(this.$el).select2({ ajax: this.ajaxOptions});}
  5. 设置属性: 在应用程序的数据对象中定义了url

请参阅这个柱塞例子中的演示。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46425172

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档