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