最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Vue Select how to bind 1 property to v-model - Stack Overflow

programmeradmin7浏览0评论

I've put v-model in v-select but it returns the whole object

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

    Vueponent('v-select', VueSelect.VueSelect)

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

this will result to this

is there a way to get the selected objects id only instead of the whole object? I've tried putting value="id" but still doesn't work.

I've put v-model in v-select but it returns the whole object

<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.ponent('v-select', VueSelect.VueSelect)

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

this will result to this

is there a way to get the selected objects id only instead of the whole object? I've tried putting value="id" but still doesn't work.

Share Improve this question edited Mar 7, 2019 at 3:48 Jiel asked Mar 7, 2019 at 3:20 JielJiel 1231 gold badge4 silver badges13 bronze badges 4
  • which library are you using for v-select? – Duong Dang Commented Mar 7, 2019 at 3:28
  • @DuongDang sagalbot.github.io/vue-select – Jiel Commented Mar 7, 2019 at 3:30
  • what are you exactly trying to return? Also, can you show us your dataobject so we can see how you have your options marked up? - Since selected is an object, you should be able to return the value you want by doing {{ selected.id }} (or whatever value you are returning – Mike Diglio Commented Mar 7, 2019 at 3:31
  • @MikeDiglio i want to put the selected objects id only in v-model, in this case it puts the whole object.. so in selected, it must have the value "1". instead of {id: 1, labels: foo} – Jiel Commented Mar 7, 2019 at 3:35
Add a ment  | 

3 Answers 3

Reset to default 2

Your best option would be to use a puted property so you can manipulate selected to return your requested value:

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

Working Codepen with your example

Do you mean

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

This will bind the selected ID into your V-select.

@Jiel , here is the working demo

Vue.ponent('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' }
    ]
  },
  puted: {
    selectedID: function () {
      return this.selected.id
    }
  }
})
<script src="https://cdn.jsdelivr/npm/vue"></script>
<script src="https://unpkg./vue-select@latest"></script>
<link href="https://maxcdn.bootstrapcdn./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>

发布评论

评论列表(0)

  1. 暂无评论