Single Select does not sync with given value or v-model

Options are a array of objects and value/v-model is a object. If I change the value the original is not changed. Works for multiple select very well!

https://codepen.io/anon/pen/eRRLPB HTML:

<div id="app">
  <h1>Vue Select</h1>
  {{ item }}
  <v-select :value.sync="item" :options="options"></v-select>
</div>

JS:

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

new Vue({
  el: '#app',
  data: function () {
    return {
      item: { label: 'a', value: 1},
      options: [
        { label: 'a', value:1},
        { label: 'b', value: 2},
        { label: 'c', value: 3},
        { label: 'd', value: 4},
        { label: 'e', value: 5}
      ]
    }
  }
})

[devmount]

You’re using the latest Vue (2.x) – .sync is an old modifier from Vue 1.x. See the docs:

This is convenient, however it leads to maintenance issues in the long run because it breaks the one-way data flow assumption: the code that mutates child props are implicitly affecting parent state. This is why we removed the .sync modifier when 2.0 was released.

The proper way would be to just use the v-model directive instead of :value.sync:

<div id="app">
  <h1>Vue Select</h1>
  {{ item }}
  <v-select v-model="item" :options="options"></v-select>
</div>

https://codepen.io/devmount/pen/jwaBYe

I would recommend to read about the “Form Input Binding” in Vue 2.x in the docs.

[mgurley]

@sagalbot Thanks, I preprocessed the submission of my model to convert the object to its value. And that worked. Plus serialization on the sever side of the value into an object, so the value is selected upon load. All good.