【Vue入門】type=”radio”について学ぼう

Vue2

ミニマリスト_カミ

kamiです。
TwitterとYoutubeもやってます。

今回はradioについての紹介です。

type="radio"とは？

type="radio"は、HTMLのinput要素の属性の一つで、その入力フィールドがラジオボタンであることを指定します。
ラジオボタンは、複数の選択肢からユーザーが1つだけ選択できるような UI コンポーネントです。

<form>
  <label>
    <input type="radio" name="gender" value="male"> Male
  </label>
  <label>
    <input type="radio" name="gender" value="female"> Female
  </label>
  <label>
    <input type="radio" name="gender" value="other"> Other
  </label>
</form>

radioの例文

<template>
  <div>
    <form>
      <label v-for="(option, index) in options" :key="index">
        <input
          type="radio"
          v-model="selectedOption"
          :value="option.value"
          @change="handleRadioChange(index)"
        > {{ option.label }}
      </label>
    </form>

    <p>You selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'option1',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    };
  },
  methods: {
    handleRadioChange(index) {
      console.log('Selected index:', index);
    }
  }
};
</script>

<style scoped>
/* Add your component-specific styles here */
</style>

スポンサードサーチ

デフォルトのチェック

radioのデフォルトのチェックについてはv-modelを使いvalueの値を指定してあげることでデフォルトの値を設定することができます。

data() {
  return {
    selectedOption: 'option1' // デフォルトのチェックを設定
  };
}

valueの取得

valueはv-modelを使って値を取得できます。
selectedOptionを指定することでvalueを取得できます。

今回の例では「selectedOption」ではvalue属性なので次の値が取得できます。

  • option1
  • option2
  • option3
this.selectedOption

スポンサードサーチ

indexの取得

indexはオブジェクトの値を取得しています。
ループでindexを取得できるので、値が変更された時にchangeメソッドが呼ばれるようにします。

<form>
  <label v-for="(option, index) in options" :key="index">
    <input
     type="radio"
     v-model="selectedOption"
     :value="option.value"
     @change="handleRadioChange(index)"
    > {{ option.label }}
  </label>
</form>
  methods: {
    handleRadioChange(index) {
      console.log('Selected index:', index);
    }
  }

Vue2Vue

Posted by kami