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

Created on 22 Jun 2017 · 10Comments · Source: sagalbot/vue-select

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}
      ]
    }
  }
})

support

Source

PatricB

Most helpful comment

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.

devmount on 27 Jun 2017

👍3 🎉1

All 10 comments

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.

devmount on 27 Jun 2017

👍3 🎉1

Hej devmount,
nice to hear the answer from you! 😁

I dit not know the .sync modifier, unlike the v-modeldirective - now i know why...
Thought I tried it already the way you suggest - but obviously I did not. Thank you for your hint!!!

In my opinion the issue could closed.

PatricB on 27 Jun 2017

You're welcome! Best wishes from Berlin to Leipzig 😄

devmount on 27 Jun 2017

@devmount thank you for fielding this!

sagalbot on 27 Jun 2017

👍1

@sagalbot Maybe a good idea to update the example on the website though? I ran into the same issue.

Aeolun on 11 Sep 2017

With options set to an array of objects, [{ label: 'foo', value: 1 }, { label: 'bar, value: 2 }], the model value getting bound is the entire selected object instead of the value of the selected object. Unless I am doing something wrong. Which is quite possible

mgurley on 1 Oct 2017

@mgurley that's the intended behaviour. Not everyones data will have a value key, so the whole object is returned.

sagalbot on 2 Oct 2017

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

mgurley on 2 Oct 2017

👍1

thx for filling in these info. Would be great if this can be updated to the doc.