CODEWITHSUNDEEP
vue.jsnuxt.jsvue-select
Max
Max

Reputation: 23

vue-select v-model reduce not working / Nuxt js Vue js

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 :

enter image description here

Here the selected item, it displays the value and not the text : (Here the problem)

enter image description here

My component file (input-custom.vue) :

enter image description here

My component in page: enter image description here

Data in page:

enter image description here

Upvotes: 0

Views: 1370

Answers (2)

Hasanul Salah K P
Hasanul Salah K P

Reputation: 1

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>

Upvotes: 0

Max
Max

Reputation: 23

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"

Upvotes: 0

Related Questions