Vue.jsのv-bindでボタンをクリックすると他を押せなくする方法
2628 回閲覧されました
みなさんこんにちは、jonioです。
今回は複数ボタンがあってあるボタンをクリックすると他のボタンをVue.jsのv-bindディレクティブでクリックできなくする方法を解説します。
デモ
デモは↓です、ボタンの選択をすると他のボタンが選択できなくなりクリックしても反応しません。
それでは実装方法を解説します。
選択肢のコード
ページを表示するコードを全て載せます、量が多く感じるかもしれませんが使うのは少しです。（CSSは必要がないので省きます）
3つの選択肢のコードは9行目〜14行目でv-forディレクティブで表示しますが14行目の「{{answer}}」は44行目〜46行目・53行目〜55行目・62行目〜64行目です。
ボタンを押せなくする
ボタンを押せなくするのは13行目でボタン（要素）を押せたり押せなくなるのはv-bindディレクティブでできます。
具体的には「v-bind:disabled=“〜”」と書きますが「〜」がtrueになったらボタンを押せなくできます。
最初はfalseにしてボタンを選択できるようにしないといけないので91行目でfalseにしています。
falseをどのタイミングでtrueにするかですが今回は選択肢をクリックした時にしたので12行目の「yourAnswer」メソッドでtrueにしています。
yourAnswerメソッドは95行目〜103行目ですが102行目でtrueになっています。
これで選択肢のボタンを押した時に他のボタンを押せなくなります。