Vue Select 如何绑定 1 属性到 v-model

Question

我已经将 v-model 放入 v-select 但它 returns 整个对象

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

这将导致这个

有没有办法只获取 selected 对象 ID 而不是整个对象？我试过输入 value="id" 但还是不行。

Answer 1

你是说

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

这会将 selected ID 绑定到您的 V-select。

Answer 2

您最好的选择是使用 computed 属性这样您就可以将 selected 操作为 return 您请求的值：

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

使用您的示例Codepen

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>

Vue Select 如何绑定 1 属性到 v-model

Vue Select how to bind 1 property to v-model

javascript

vue.js

vuejs2

v-select

vue-select

Vue Select 如何绑定 1 属性 到 v-model

Vue Select how to bind 1 property to v-model

javascript

vue.js

vuejs2

v-select

vue-select

Vue Select 如何绑定 1 属性到 v-model