I'm using vue-select. When I want to display the selected element, it shows me the value and not the text (see the screen). I saw on several reports (and on the documentation) that I could use reduce. I also saw that I could add a ":key" props on the component but that doesn't work either.
Here I choose the item :
Here the selected item, it displays the value and not the text : (Here the problem)
My component file (input-custom.vue) :
My component in page:
Data in page:
I found the solution.
This is my "handleInput" method.
I emit "e.value" but I want to emit the Object, so replace "e.value" => "e"
here there are three props used:
- :options="optionsVariable" - optionsVariable contains array of objects/Array
- label="optionName"- label prop is the Array Item which You need to display ( here from each array of objects, you display 'optionName'.
- :reduce="option => option.optionValue" - reduce will store optionValue from each array of objects to the v-model variable 'vModelVariable'
<v-select
label="optionName"
:options="optionsVariable"
v-model="vModelVariable"
:reduce="option => option.optionValue"
:placeholder="Enter Placeholder"
>
</v-select>
