4

我想在 vue-js 中为多个组件使用一个功能。为此，我需要使两件事动态化 - 1.ajax-url 和 2. 用于选项的数据集持有者。我阅读了https://sagalbot.github.io/vue-select/docs/Advanced/Ajax.html，因为这个函数运行良好。我有以下代码-

<v-select :options="fieldSet[name].dataSet" :url="/user/autocomplete?term=" @search="onSearch">
    <template slot="no-options">
            <button class="btn btn-block">Add New Item</button>
    </template>
</v-select>

onsearch 方法如下，如上面的链接中给出的 -

// here search and load parameter gives searchText and spinner for UX
onSearch: function onSearch(search, loading) {
    loading(true);
    // this.search(loading, search, this);
    // here i want to get options holder and ajax-url so that i can 
    // fetch data using ajax and assign to some dynamic variable (which is defined for particular field)
},

我研究的是 - 为 Vue Select2 包装器组件使用动态 AJAX URL ，但无法确定要为 v-select 做什么。

4

1 回答 1

3

在我遇到同样的问题之前的一段时间，我做了以下更改/node_modules/vue-select/dist/vue-select.js，更改等于两个文件中的更改 -/node_modules/vue-select/src/mixins/ajax.js并且/node_modules/vue-select/src/components/select.vue，

它有两个步骤，首先更改 $emit.function 参数并将您的新变量注册为道具

make search foronSearch:{type:Function,default:function(t,e){}}}和我一样onSearch:{type:Function,default:function(t,e,url){}}}，因为这个 make search 函数将返回三个参数..

并搜索watch:{search:function(){this.search.length>0&&(this.onSearch(this.search,this.toggleLoading),并将其更改为，watch:{search:function(){this.search.length>0&&(this.onSearch(this.search,this.toggleLoading,this.ajaxUrl,this.optionHolder),因为这将返回 4 个参数 ajaxUrl 和 optionHodler 并观察它们，

现在我们需要使用$emit

进行搜索this.$emit("search",this.search,this.toggleLoading))}并将其更改this.$emit("search",this.search,this.toggleLoading,this.ajaxUrl,this.optionHolder))}为此将返回四个变量，使它们可以全局访问...

现在通过更改以下内容在 select.vue 文件中注册您的新参数 - 搜索props:{value:{default:null},并将这两个定义放在ajaxUrl:{type:String,default:''},optionHolder:{type:String,default:''},搜索文本之后......

这对我有用......让我知道它是否对你有用？

于 2018-03-20T07:26:54.433 回答