How to pass dynamic ajax-url to vue-select when a function is called by a search event?

I want to use one function for several components in vue-js. To do this, I need to make two things dynamic - 1.ajax-url and 2. dataset holder for options. I read https://sagalbot.imtqy.com/vue-select/docs/Advanced/Ajax.html since this function works fine. I have the 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>

The onsearch method is as follows:

// 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 at - Use the dynamic AJAX URL for the Vue Select2 shell component , but could not determine what to do for v-select.

+4
source share
1 answer

- , , /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}, def2 t211 > ...

... , ?

+3

Source: https://habr.com/ru/post/1694756/


All Articles