Vuex, vuejs - 선택 요소 옵션에서 예상대로 바인딩되지 않음

Vuex, vuejs - 선택 요소 옵션에서 예상대로 바인딩되지 않음

뷰 버전:

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

배경:

이건 제가 만들고 있는 게임입니다.그 페이지는 두 개로 단순합니다.<select>드롭다운 선택 요소.두번째<select>원소의<options>는 API 요청에서 동적으로 생성되며 Vuex 저장소에서 게터를 사용하는 조건부 테스트와 함께 첫 번째 요소에서 어떤 옵션을 사용하는지에 따라 달라집니다.

문제

통화 유형 메뉴를 전환한 다음 원래 설정으로 다시 전환하면 두 번째<select>Vuex 저장소에 표시된 값에 더 이상 바인딩되지 않습니다.

그Price. currency나머지:"USD"그러나 다시 토글하면 선택 메뉴가 이 바인딩을 해제하고 공백으로 표시됩니다.

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

원하는 결과:

나는 할 수 있기를 원합니다.

• 첫 번째 통화 유형 간에 전환<select>Vuex 스토어에 저장된 값을 다시 전환할 때 계속 선택할 수 있습니다.
• vuex 스토어가 여전히 말하는 것처럼 그것이 묶일 것을 기대하는 것.Price.currency = "USD"그리고<select>를 사용하여 바인딩됩니다.:value그래서 저는 그것이 선택되어야 한다고 믿습니다.USD선택사항이지만 그렇지 않습니다.그래서 바인딩이 브라우저에서 렌더링되지 않는 것 같습니다.

저는 당신이 이 문제를 이해할 수 있기를 바랍니다.레포를 보고 실행하여 제가 여기서 무엇을 하고 있는지 확인하는 것이 정말 더 쉬울 것 같습니다!

제가 며칠째 이 일로 고생하고 있으니 어떤 도움이라도 주시면 감사하겠습니다.

vuex 속성에 바인딩하려면 다음과 같은 양방향 계산 속성이 필요합니다.

<input v-model="message">

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

자세한 내용은 https://vuex.vuejs.org/guide/forms.html 에서 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/51835547/vuex-vuejs-not-binding-as-expected-on-select-elements-options