frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

Vue.js ラジオボタンで要素を切り替える方法

スポンサードリンク


スポンサードリンク


Vue.jsを使用してラジオボタンを切り替えた時要素を切り替える方法について解説します。

下記のようになります。

デモ


See the Pen
xBddEg
by funclur (@funclur)
on CodePen.

htmlは通常通りですね。

<div id="app">
<label><input type="radio" name="radio" v-on:change="handler" value="a" checked> A</label>
<label><input type="radio" name="radio" v-on:change="handler" value="b"> B</label>
<p v-if="show">Hello Vue.js</p>
</div>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    handler: function (event) {
      if(event.target.value === 'a'){
         this.show = true
      }else{
        this.show = false           
     }
    }
  }
})

解説

1.表示・非表示を切り替えたい要素にv-if="show"を付与します。
2.dataには初期値が入るのでshow:trueとして表示にしておきます。
3.ラジオボタン要素にそれぞれv-on ディレクティブを付与して変更されたらイベントが発火されるようにします。
4.引数eventを設定してvalueを取得し表示・非表示を判定します。

注意

v-modelとcheckedは共存できない

v-modelにしてwatchしようと思ったのですがv-modelとcheckedは共存できないようで、チェックが付かない現象が起きてしまったため v-on:changeにしました。
何かほかのスマートな解決法はあるかもしれません。

www.frontendmemo.xyz