v-select not showing options when using ajax + taggable + multiple

Viewed 38

This is an input for searching and selecting an email address for CC-ing. Without taggable the AJAX search of v-select works perfectly, but I need to be able to "add" emails so I have a choice that says "Send to anyway". With taggable set to true when I do an AJAX search, it will show the above string but not the options. I have checked and verified that the AJAX function is returning results so it can't be that.

Here's what my code looks like:

<v-select placeholder="" 
    label="firstname" 
    v-model="edit_email_cc"
    :taggable=true
    :filterable=false
    :multiple=true
    :options="search_options"
    @search:blur="handleEmailCCBlur()" 
    v-on:search="fetchSearchOptions">

    <template #no-options="{ search }">
        <span v-if="search == ''">Type to search...</span>
        <span v-else>No person found for "{{search}}"</span>
    </template>

    <template #open-indicator="{ attributes }">
        <span v-bind="attributes"></span>
    </template>

    <template #spinner="{ loading }">
        <div v-if="loading" class="vs__spinner"></div>
    </template>

    <template slot="option" slot-scope="option">
        <div class="v-select-options" v-if="option.lastname == undefined">
            Send to email {{ option.firstname }}
        </div>
        <div class="v-select-options" v-else>
            {{ option.firstname }} {{ option.lastname }} <strong>({{ option.email }})</strong>
        </div>
    </template>
    <template slot="selected-option" slot-scope="option">
        <div class="v-select-options selected">{{ option.firstname }} {{ option.lastname != undefined?option.lastname:'' }}</div>
    </template>

</v-select>

and the search function (just in case)

fetchSearchOptions(keyword, loading) {
    this.search(loading, keyword, this, this.base_url);
},

search: debounce((loading, keyword, vm, base_url) => {
    if (keyword === '') {
        vm.search_options = [];
    }
    if (keyword !== '') {
        var search_url = base_url + '/common/search';
        loading(true);

        axios.post(search_url, {keyword : escape(keyword), field : 'email'})                
            .then(response => {
                vm.search_options = response.data;
                console.log(vm.search_options);
                loading(false);
            })
    }
}, 350),

Any help would be much appreciated! Thank you!

J

0 Answers
Related