Vue Выберите способ привязки 1 свойства к v-модели

Я поместил v-model в v-select, но он возвращает весь объект

<div id="app">
  <h1>Vue Select - Using v-model</h1>
  <v-select v-model="selected" :options="options" value="id" label="labels">

  </v-select>  
  {{selected}}
</div>

    Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: [      
      {id: 1, labels: 'foo'},
      {id: 3, labels: 'bar'},
      {id: 2, labels: 'baz'},
    ],
    selected: '',
  }
})

это приведет к этому введите здесь описание изображения

есть ли способ получить идентификатор выбранного объекта только вместо всего объекта? Я пробовал поставить value="id", но все равно не работает.


javascript vue.js vuejs2 vue-select v-select
person Jiel    schedule 07.03.2019    source источник
comment
какую библиотеку вы используете для v-select?   -  person Duong Dang    schedule 07.03.2019
comment
@DuongDang sagalbot.github.io/vue-select   -  person Jiel    schedule 07.03.2019
comment
что именно вы пытаетесь вернуть? Кроме того, можете ли вы показать нам свой объект данных, чтобы мы могли увидеть, как вы разметили свой options? - Поскольку selected является объектом, вы должны иметь возможность вернуть нужное значение, выполнив {{ selected.id }} (или любое другое значение, которое вы возвращаете   -  person Mike Diglio    schedule 07.03.2019
comment
@MikeDiglio Я хочу поместить идентификатор выбранных объектов только в v-модель, в этом случае он помещает весь объект ... поэтому в выбранном он должен иметь значение 1. вместо {id: 1, labels: foo}   -  person Jiel    schedule 07.03.2019

Ответы (3)


arrow_upward
2
arrow_downward

Лучшим вариантом было бы использовать свойство computed, чтобы вы могли манипулировать selected для возврата запрошенного значения:

computed: {
    selectedID: function () {
      return this.selected.id;
    }
  }

Работа с Codepen на вашем примере

person Mike Diglio    schedule 07.03.2019
comment
Насколько мне нравится обходной путь использования вычисляемого свойства здесь. Я до сих пор не знаю, почему он предпочтительнее, чем selected.id. - person NeonNatureEX; 07.03.2019
comment
@NeonNatureEX выводит то же самое, но мне нужна была идея, потому что я использую ее для других целей. - person Jiel; 07.03.2019
comment
Ах я вижу. Рад, что ты получил ответ. - person NeonNatureEX; 07.03.2019

arrow_upward
0
arrow_downward

Вы имеете в виду

<v-select v-model="selected" :options="options" id=" {{selected.id}} " label="labels"> ?

Это привяжет выбранный идентификатор к вашему V-select.

person NeonNatureEX    schedule 07.03.2019
comment
пожалуйста, смотрите мой последний комментарий в моем посте. - person Jiel; 07.03.2019
comment
Да, вы хотели иметь 1 вместо {id: 1, labels: foo}, верно? Использование {{ selected.id }} вместо {{ selected }} решит эту проблему, если это все, что вам нужно. - person NeonNatureEX; 07.03.2019
comment
Кстати, что именно вы подразумеваете под v-model? Вы хотите отобразить метку и получить идентификатор как значение или установить идентификатор как идентификатор v-select? - person NeonNatureEX; 07.03.2019
comment
я имел в виду, что значение selected должно быть 1, а не весь объект.. поэтому я бы не стал делать {{selected.id}} - person Jiel; 07.03.2019
comment
value={{ selected.id }} вернет 1 в качестве значения вместо всего объекта - person NeonNatureEX; 07.03.2019
comment
@Jiel, если вы не хотите использовать {{selected.id}}, другим вариантом будет использовать свойство computed и назвать его как-то вроде selectedID, и тогда вы можете просто вернуть значение. Проблема в том, что vue-select хранит ваши параметры как объекты, поэтому он всегда будет возвращать этот объект при его привязке -> codepen.io/anon/pen/JzWPKO - person Mike Diglio; 07.03.2019
comment
@MikeDiglio ах да, это именно то, что я хотел. пожалуйста, поместите это как ваш ответ .. - person Jiel; 07.03.2019

arrow_upward
0
arrow_downward

@Jiel, вот рабочая демонстрация

Vue.component('v-select', VueSelect.VueSelect);

var app = new Vue({
  el: '#app',
  data: {
    selected:'',
    options: [
      { id: 0, labels: 'Vegetables' },
      { id: 1, labels: 'Cheese' },
      { id: 2, labels: 'Fruits' }
    ]
  },
  computed: {
    selectedID: function () {
      return this.selected.id
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />  

<div id="app">
  <h1>Vue Select - Using v-model</h1>
  <v-select v-model="selected" :options="options" label="labels">
  </v-select>  
  selectedID : {{selectedID}}
</div>

person Saurabh Mistry    schedule 07.03.2019