в vueJS, как связать Id выбранной опции в v-select v2.5.1 - PullRequest
Новая
       9

в vueJS, как связать Id выбранной опции в v-select v2.5.1

0 голосов
/ 22 октября 2018

Уже несколько часов я пытаюсь получить идентификатор выбранной опции в v-select, но он возвращает мне объект, а не идентификатор.Есть ли способ получить только 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: '',
        ...    
        }
 }

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Вместо использования 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>
0 голосов
/ 22 октября 2018

как насчет добавления вычисленного реквизита 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>
...