點燈坊

失くすものさえない今が強くなるチャンスよ

使用 v-model 綁定 Radio

Sam Xiao's Avatar 2024-01-30

v-model 不僅僅只能綁定到 Textbox，也可以綁定到 Radio，當在 HTML 改變 Radio 狀態時，JavaScript 也會連動改變 State。

Version

Vue 3.4

Composition API

<template>
  <div>
    <input type="radio" id="one" value="apple" checked v-model="checked" />
    <label for="one">Apple</label>
    <input type="radio" id="two" value="google" v-model="checked" />
    <label for="two">Google</label>
  </div>
  <div>{{ checked }}</div>
</template>

<script setup>
import { ref } from 'vue'

let checked = ref('apple')
</script>
  • type=radio：為必須不能省略
  • id 主要是為了 for 搭配
  • v-model：直接將 Radio 綁定到 checked state，任何在 HTML 對 state 變動會連動 JavaScript，任何在 JavaScript 對 state 變動也會連動 HTML
  • value：Radio 欲綁定的值

Options API

<template>
  <div>
    <input type="radio" id="one" value="apple" checked v-model="checked" />
    <label for="one">Apple</label>
    <input type="radio" id="two" value="google" v-model="checked" />
    <label for="two">Google</label>
  </div>
  <div>{{ checked }}</div>
</template>

<script>
export default {
  data: () => ({
    checked: 'apple'
  })
}
</script>
  • 最後附上相同功能的 Options API 供參考
  • State 宣告在 data() function
  • v-model 使用上不變

Conclusion

  • Radio 一樣可以使用 v-model 綁定
  • 在 value attribute 指定要綁定的值

Reference

Vue, 單選按鈕

# Vue