javascript - Vue 选择如何将 1 个属性绑定(bind)到 v-model

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

您的最佳选择是使用计算属性，以便您可以操作selected来返回您请求的值:

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

工作中Codepen以你的例子