Map v-model
into custom properties when using is-multi
#258
Replies: 3 comments
-
Currently, this functionality doesn't exist in the component. To support this use case, the component would need a new prop like However, you can use a workaround. The goal is to use a writable <script setup>
import { ref, computed } from 'vue'
import VueSelect from 'vue3-select-component'
// Original data from API
const items = ref([
{ id: 1, code: 'blabla', text: 'bla' },
// ...
])
// Selected IDs for the component v-model
const selectedIds = computed({
get: () => items.value.filter(item => item.selected).map(item => item.id),
set: (newIds) => {
// Update the selected state on the original items
items.value.forEach(item => {
item.selected = newIds.includes(item.id)
})
}
})
// Transform items to options format the component expects
const options = computed(() =>
items.value.map(item => ({
label: item.text,
value: item.id
}))
)
</script>
<template>
<VueSelect
:is-multi="true"
v-model="selectedIds"
:options="options"
/>
</template> |
Beta Was this translation helpful? Give feedback.
-
Thank you very much! It can do the trick I think. |
Beta Was this translation helpful? Give feedback.
-
After re-thinking about a possible implementation, I'm not sure this would fit the component easily. |
Beta Was this translation helpful? Give feedback.
-
First of all, thanx for this great tool!
But...
How can I do map to inner v-model property when isMulti?
With option I can do so (:get-option-label/:get-option-value). But I need v-model.
For example, here the data I receive from server:
I want something like this:
Thank you.
Beta Was this translation helpful? Give feedback.
All reactions