vue-select v-model 减少不起作用/Nuxt js Vue js

Question

我正在使用 vue-select。 当我想显示所选元素时，它会显示值而不是文本（请参见屏幕）。 我在几份报告（以及文档）中看到我可以使用reduce。 我还看到我可以在组件上添加“:key”道具，但这也不起作用。

我在这里选择项目：

这里选择的项目，它显示值而不是文本：（这里是问题）

我的组件文件（input-custom.vue）：

我的页面组件：

页面数据：

Answer 1

我找到了解决方案。

这是我的“handleInput”方法。

我发出“e.value”，但我想发出对象，所以替换“e.value”=>“e”

Answer 2

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>