Vuex, vuejs - not binding as expected on select elements options

Question

Vue versions:

"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"

Background:

This is for a game I'm building. The page is simple with two <select> drop down selection elements. The second <select> element's <options> are dynamic from an API request, and depend on which option is being used from first element along with a conditional test using a getter on the Vuex store.

The Problem

When I toggle the currency type menu, and then toggle it back to the original setting, the second <select> is no longer bound to the value it should be as shown in the Vuex store.

The Price. currency remains: "USD" but when toggled back, the select menu looses this binding and displays blank.

<label for="currency-type">Choose currency type: </label>
<select id="currency-type" :value="Price.currencyType" @input="setCurrencyType">
  <option 
    v-for="item in Price.availableCurrencyTypes"
    :value="item"
  >{{item}}</option>
</select>


<label for="currency-selection-dynamic">Choose a currency [dynamic]: </label>
<select id="currency-selection-dynamic" :value="Price.currency" @input="setCurrency">
  <option
    v-for="item in this.getAvailableCurrencies"
    :value="item.currency"
  >{{item.currency}}: {{item.label}}</option>
</select>

Desired Outcome:

I want to be able:

to toggle between the currency types in the first <select> and for the value stored in the Vuex store to still be selected when I toggle back.
to expect it to be binded, as the vuex store still says Price.currency = "USD", and the <select> is bound using the :value so I believe it should be selecting the USD option but its not. So it seems the binding is not being rendered in the browser.

I hope that you can understand this issue. I think it will really be easier for you to look at the repo and run it to see what I am on about here!

Any help would be greatly appreciated as I've been struggling with this for days now.

Imre_G · Accepted Answer · 2018-08-14 08:03:49Z

1

When you want to bind to the vuex properties you need a two way computed property like this:

<input v-model="message">

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

More info here: https://vuex.vuejs.org/guide/forms.html

answered Aug 14, 2018 at 8:03

Imre_G

2,5251 gold badge20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GustavMahler Over a year ago

Thanks Imre_G, I couldn't get it working using the first method described in the documentation link you provided. That method was to have (in the vue component) a computed property retrieving the data from the store, then a local method that sent a commit to the stores corresponding mutation function. I couldn't get that to work. Instead when I used the "Two-way Computed Property" as described in the link it worked. Very peculiar...

Collectives™ on Stack Overflow

Vuex, vuejs - not binding as expected on select elements options

Vue versions:

Background:

The Problem

Desired Outcome:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Vue versions:

Background:

The Problem

Desired Outcome:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related