Nullppo

メモ帳的なにか

VueとVuex連携させてる時のradioについて

VueとVuexを連携させてる時に、
radioの選択値ってどうやって連携すんの!?ってなったので、
メモしておきます。

Vueだけでのradio

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

このように、v-modelを使って連携してます。
でもコレって、自身のデータオブジェクトに対する更新であって、
「Vuexの値を書き換えたい場合どうするんじゃあああああ!」
ってなりますよね。

僕がやったVuexに連携する方法

computedのget/setを使います!
こんな感じ。

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
new Vue({
  // ・・・
  computed: {
    picked: {
      get: function() {
        return this.$store.state.picked;
      },
      set: function(value) {
        this.$store.dispatch('setPicked', value);
      }
    }
  }
});

※Vuex側は普通なので省略します

以上、メモでしたmm