Value refusing to update with .sync about vue-select

[sagalbot]

Could you post a gist of your complete component?

On a side note, It sounds like you could probably skip the filterGame remapping, and instead set a custom label:

<v-select label="name" :value.sync="form.primary_game" :options="games"></v-select>

This well tell vue-select to use game.name when creating labels.

[kylekz]

https://gist.github.com/xKairu/40be84413dad74c7173b4e95011f9dc7

I'm using Laravel Spark, if anything is confusing.

In regards to the label, what about the value? My data is stored as id/name rather than value/label, so is there an option to pick which key the plugin uses as the value too?

[sagalbot]

Sorry for the delayed reply. Vue-select will simply return the entire object, no need to set a key.

I'm not sure what new SparkForm() returns, so I can't be of much help. If add a test property to your data object and set <v-select :value.sync="test">, does the value sync properly?

[kylekz]

SparkForm is essentially a wrapper around vue-resource that handles processing, validation errors etc.

If I just add a test variable into my data object then swap the value binding, the test variable is then updated when I select an option from the selectbox.

If I then add this.test = this.findGame(this.user.primary_game); into my getGames success callback, I get the same issue as before. It acts like a one way binding and not a two way. It's this part that fails.

Everything works fine, including the picking of the game within the selectbox and having the server update the user model, except taking the ID from the user model, pulling the full object from the games array and setting the default selected item.

[kylekz]

I've been trying to sort this out for two weeks now with no result. I've found that adding a click handler to some element and having it manually update the value works, as well as setting a timeout before setting the value, so I'm thinking the issue has something to do with the order of instantiation.

However I've just now fixed it by using vm.$nextTick like so:

this.$http.get('/api/game')
                .then(response => {
                    this.games = response.data.data;

                    this.$nextTick(() => {
                        this.form.primary_game = this.findGame(this.user.primary_game);
                    });
                });

[ebaguma]

@kylewardnz please help me out, am having the same issue. Two way binding is not working, kindly clarify how you got it to work