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