vueJ에서 v-select v2.5.1에서 선택한 옵션의 ID를 바인딩하는 방법

vueJ에서 v-select v2.5.1에서 선택한 옵션의 ID를 바인딩하는 방법

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: '',
        ...    
        }
 }

사용하는 대신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>

컴퓨터 소품을 추가하는 건 어때?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>

알아내는 데 꽤 시간이 걸렸지만, 듣자하니 당신은 이 두 가지를 사용할 수 있을 것 같아.:reduce="item = item.id"

참조: https://vue-select.org/guide/values.html#getting-and-setting

'계산된' 접근법으로는 내 경우엔 잘 안 될 테니까

v-select에서 다음 특성 추가

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

1개의 키를 반환할 때, 1개의 키를 반환할 수 있습니다.

단일 키를 반환하거나 선택 항목을 동기화하기 전에 변환해야 하는 경우 vue-select를 사용하면 선택한 옵션을 @input 이벤트에 전달하기 전에 변환할 수 있는 축소 콜백이 제공됩니다.다음 데이터 구조를 고려하십시오.

옵션 = [{코드: 'CA', 국가: '캐나다'}];

국가를 표시하지만 코드를 v-model로 되돌리는 경우 축소 제안을 사용하여 필요한 데이터만 수신할 수 있습니다.

<v-select:country="country=> country.code" label="country" />

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

언급URL : https://stackoverflow.com/questions/52920934/in-vuejs-how-to-bind-the-id-of-selected-option-in-v-select-v2-5-1