在 vueJS 中，如何在 v-select v2.5.1 中绑定所选选项的 Id答案

【问题标题】：in vueJS, how to bind the Id of selected option in v-select v2.5.1在 vueJS 中，如何在 v-select v2.5.1 中绑定所选选项的 Id
【发布时间】：2019-03-26 00:46:11
【问题描述】：

我试图在 v-select 中获取所选选项的 id 已经好几个小时了，但它返回给我的是对象而不是 id。有没有办法只获取所选选项的Id（对象Id）？

我已经检查了文档站点： https://sagalbot.github.io/vue-select/docs/

我还检查了以下各种示例： https://codepen.io/collection/nrkgxV/

但到目前为止，我还没有找到解决问题的具体方法。缺少什么或我做错了什么？

我的代码：

<template>
    <div>
        <v-select 
            v-model="selectedId"
            :options="items"
            label="name"
        ></v-select>
    </div>         
</template>

<script>
export default {
    data () {
    return {
        items: [
            {id: 1, name: "User 1", creator_id: 3},
            {id: 2, name: "User 2", creator_id: 1},
            {id: 4, name: "User 3", creator_id: 3},
        ],
        selectedId: '',
        ...    
        }
 }

【问题讨论】：

选择的选项是selectedId。不要在 Vue 中从 DOM 中读取数据；从组件的作用域数据中读取它。
是的@DanielBeck，感谢您的快速回复。但我想在变量 selectedId 中获取对象 ID，而不是对象本身。有办法吗？
你为什么不能只做selectedId.id？
或者，切换到 Vuetify 的 v-select (demo)。

标签： vue.js vuejs2 vue-component jquery-select2 vuex

【解决方案1】：

您可以在 select 上监听事件，而不是使用 v-model ：

Vue.component("v-select", VueSelect.VueSelect);
new Vue({
  el: "#app",
  data () {
    return {
      items: [
        {id: 1, name: "User 1", creator_id: 3},
        {id: 2, name: "User 2", creator_id: 1},
        {id: 4, name: "User 3", creator_id: 3},
      ],
      selectedId: '' 
    }
  },
  methods: {
    selectId(e) {
      this.selectedId = e.id
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/2.5.1/vue-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <v-select 
    @input="selectId($event)"
    :options="items"
    label="name">
  </v-select>
  <p>Selected ID: {{ selectedId }}</p>
</div>

【讨论】：

【解决方案2】：

如何添加计算道具id

<script>
    export default {
        data () {
            return {
                items: [
                    {id: 1, name: "User 1", creator_id: 3},
                    {id: 2, name: "User 2", creator_id: 1},
                    {id: 4, name: "User 3", creator_id: 3},
                ],
                selectedId: {}  
            }
        },
        computed: {
            id: function () {
                return (this.selectedId && this.selectedId.id)?this.selectedId.id:'';
            }
        }
    }
</script>

【讨论】：

是的，确实如此。但问题是我正在开发一个几乎有 8 个 v-select 的组件。我想使用尽可能少的变量。

【解决方案3】：

我花了很长时间才弄清楚，但显然你可以使用:reduce="item = item.id"

见：https://vue-select.org/guide/values.html#getting-and-setting

一个真正的救命稻草，因为“计算”方法在我的情况下不会削减它

【讨论】：

【解决方案4】：

在 v-select 中添加这些属性

item-value="id" item-text="name"

【讨论】：

【解决方案5】：

使用reduce返回单个键

如果您需要返回单个键，或者在同步之前转换选择，vue-select 提供了一个 reduce 回调，允许您在将选定的选项传递给 @input 事件之前对其进行转换。考虑这个数据结构：

让选项 = [{code: 'CA', country: 'Canada'}];

如果我们想显示国家，但将代码返回给 v-model，我们可以使用 reduce 属性只接收需要的数据。

:reduce="country => country.code" label="country" />

https://vue-select.org/guide/values.html#transforming-selections

【讨论】：