Posted at

Vue.js ラジオボタンの選択状態でボタンを押せる・押せないを実装したいとき

単純なradioボタンではなく、radioと連動して、buttonを活性・非活性にしたいときは、こうやると期待どおりに動きました。

公式のようにvalueをそのままやるとdata内でうまく値が連携されないようです。

:value(v-bind:value)でやるとうまくいきました。


<input type="radio" v-model="picked" :value="true">hoge
<input type="radio" v-model="picked" :value="false">fuga

<button :disabled="!picked">HOGE</button>
<button :disabled="picked">FUGA</button>

Vue.js

フォーム入力バインディング