Search code examples
ajaxvue.jsv-select

How to pass dynamic ajax-url for vue-select while function called for search event?

I want to make use one function for multiple component in vue-js. To do so i need to make two things dynamic - 1.ajax-url and 2. dataset holder for options. I read https://sagalbot.github.io/vue-select/docs/Advanced/Ajax.html as per this function working fine. i have following code-

<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 method is as follows as given in above link -

// 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.

Solution

  • Some time before I faced same problem, i made following changes on /node_modules/vue-select/dist/vue-select.js and changes are equals to changes in two files -- /node_modules/vue-select/src/mixins/ajax.js and /node_modules/vue-select/src/components/select.vue,

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

    make search for onSearch:{type:Function,default:function(t,e){}}} and i made it like onSearch:{type:Function,default:function(t,e,url){}}} because this make search function will return three parameters..

    and search for watch:{search:function(){this.search.length>0&&(this.onSearch(this.search,this.toggleLoading), and change it to watch:{search:function(){this.search.length>0&&(this.onSearch(this.search,this.toggleLoading,this.ajaxUrl,this.optionHolder), because this will return 4 parameters ajaxUrl and optionHodler and watch them ,

    now we need to return them using $emit

    make a search for this.$emit("search",this.search,this.toggleLoading))} and change it to this.$emit("search",this.search,this.toggleLoading,this.ajaxUrl,this.optionHolder))} this will return four variables making them accessible globally ...

    Now register your new parameter in select.vue file by changing following - make search forprops:{value:{default:null}, and place these two these ajaxUrl:{type:String,default:''},optionHolder:{type:String,default:''}, defination after search text ...

    this is working for me ... let me know whether it worked for you or not?