Vue選擇如何將1個屬性綁定到v模型

Question

我將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: '',
  }
})

這將導致

有沒有一種方法來獲取所選對象的ID，而不是整個對象？ 我曾嘗試將value =“ id”放進去，但仍然無法正常工作。

Answer 1

最好的選擇是使用computed屬性，以便您可以操縱selected返回所需的值：

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

在示例中使用Codepen

Answer 2

你的意思是

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

這會將選定的ID綁定到您的V型選擇器中。

Answer 3

@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>