Map v-model into custom properties when using is-multi
#258
Unanswered
pls-kick-me
asked this question in
Q&A
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> |
0 replies
|
Thank you very much! It can do the trick I think. |
0 replies
|
After re-thinking about a possible implementation, I'm not sure this would fit the component easily. |
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
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.
All reactions