Vue.js v-modelでラジオボタンの値を取得する

2023年1月2日

環境
Windows 10 Home 64bit
Vue.js 5.0.8
Google Chrome 108.0.5359.125（Official Build）（64 ビット）
yarn 1.22.19

構文
input type="radio" name="ラジオボタンの名前" value="値" v-model="val"
「v-model」を使用してラジオボタンの値を取得します。

使用例

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>ラジオボタンの値を取得するサンプル</title>
  <script src="https://unpkg.com/vue@next"></script>

</head>

<body>
  <div id="app"> 
     
          <div >
            <div >
              <input type="radio" name="city" value="tokyo" v-model="val" tabindex="0">
              <label>東京</label>
            </div>
          </div>
          <div >
            <div >
              <input type="radio" name="city" value="oosaka" v-model="val" tabindex="1">
              <label>大阪</label>
            </div>
          </div>
          <div >
            <div >
              <input type="radio" name="city" value="fukuoka" v-model="val" tabindex="2">
              <label>福岡</label>
            </div>
      </div>

      選択項目<h2 >{{val}}</h2>

    </div>

  </div>
  <script>

    const res = {
      data() {
        return {
          val: ''
        }
      }
    }

    Vue.createApp(res).mount('#app')

  </script>
</body>

</html>

実行結果
ラジオボタン「福岡」を選択すると、値「oosaka」を表示します。

Vue.js

Posted by arkgame