ajax - 如何在调用搜索事件的函数时为 vue-select 传递动态 ajax-url？

Question

我想在 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)
},

What i looked into is - Use dynamic AJAX URL for Vue Select2 wrapper component , but could not determine what to do for v-select.

Answer 1

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

It has two steps first change $emit.function parameters and register your new variable as props

搜索 onSearch:{type:Function,default:function(t,e){}}} 我让它像 onSearch:{type:Function,default:function (t,e,url){}}} 因为这个 make 搜索函数将返回三个参数..

并搜索 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 :''}, 搜索文本后的定义 ...

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