การทำงานกับ radio ใน Vue

การทำงานกับ radio เกิดขึ้นในลักษณะที่คล้ายกัน ลองมาดู ในทางปฏิบัติกัน ก่อนอื่นเรามาสร้างคุณสมบัติ choice ขึ้นมา ซึ่งเราจะทำการผูก กับกลุ่ม radio:

javascriptdata() {
  return {
    choice: '',
  }
}

ตอนนี้เรามาสร้างกลุ่ม radio กัน:

App.vue<template>
  <input name="radio" type="radio">
  <input name="radio" type="radio">
  <input name="radio" type="radio">
</template>

มาเขียน directive v-model ให้กับแต่ละอัน และทำการผูกกับคุณสมบัติ choice:

App.vue<template>
  <input name="radio" type="radio" v-model="choice">
  <input name="radio" type="radio" v-model="choice">
  <input name="radio" type="radio" v-model="choice">
</template>

มาเพิ่ม value ให้กับแต่ละอันด้วย:

App.vue<template>
  <input name="radio" type="radio" v-model="choice" value="v1">
  <input name="radio" type="radio" v-model="choice" value="v2">
  <input name="radio" type="radio" v-model="choice" value="v3">
</template>

ตอนนี้ในคุณสมบัติ choice จะมี value ของ radio ที่ถูกเลือกอยู่เสมอ:

App.vue<template>
  คุณเลือก: {{ choice }}
</template>