vuejs/awesome-vue

multiselect in vuero customization

shreyas-ananth opened this issue · 1 comments

Based on the same template, how can i add my custom value in the multiselect dropdown, if my search item is missing in the dropdown such that i can send my new item posted to the backend.

When I search in the multiselect, if value is not shown based on search, then if I add that item and post the data, it should be available in the multiselect dropdown once the item data is posted.

Please suggest me some solution for this scenario

I have been using vue3 along with <script setup lang="ts"> typescript. Following is the link for the components i'm using :
https://vuero.cssninja.io/elements/addons-vueform-multiselect
Following is my code sample:

Multiselect v-model="selectSlotValue" placeholder="Select a language" label="name" :options="selectSlotOptions"
template v-slot:singlelabel="{ value }"
div class="multiselect-single-label"
img class="select-label-icon is-curved" :src="value.icon" /
span class="select-label-text"
{{ value.name }}
/span
/div
/template
template v-slot:option="{ option }"
img class="select-option-icon is-curved" :src="option.icon" /
span class="select-option-text"
{{ option.name }}
/span
/template
/Multiselect

const selectSlotValue=[]
const selectSlotOptions = [
{
value: 'javascript',
name: 'Javascript',
icon: '/images/icons/stacks/js.svg',
},
{
value: 'spiderman',
name: 'ReactJS',
icon: '/images/icons/stacks/reactjs.svg',
},
{
value: 'vuejs',
name: 'VueJS',
icon: '/images/icons/stacks/vuejs.svg',
},
]

Scrum commented

it is best to check with the package creators in the package repository.