Как передать динамический ajax-url для vue-select, когда вызывается функция для поиска события?

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>

метод поиска, как указано в приведенной выше ссылке -

// 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)
},

Что я изучил, так это - используйте динамический URL AJAX для компонента-оболочки Vue Select2, но не можете определить, что делать для 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,

Он имеет два шага: сначала измените параметры $emit.function и зарегистрируйте новую переменную в качестве реквизита.

сделать поиск onSearch:{type:Function,default:function(t,e){}}} и я сделал это как onSearch:{type:Function,default:function(t,e,url){}}} потому что эта функция поиска будет возвращать три параметра..

и искать 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:''}, определение после поиска текста...

это работает для меня... дайте мне знать, сработало ли это для вас или нет?