點燈坊

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

使用 v-model 綁定多個 Checkbox

Sam Xiao's Avatar 2024-01-30

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

Version

Vue 3.4

Composition API

<template>
  <div>
    <input type="checkbox" id="apple" value="Apple" v-model="checked" />
    <label for="apple">Apple</label>
    <input type="checkbox" id="google" value="Google" v-model="checked" />
    <label for="google">Google</label>
    <input type="checkbox" id="ms" value="Microsoft" v-model="checked" />
    <label for="ms">Microsoft</label>
  </div>
  <div>{{ checked }}</div>
</template>

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

let checked = ref([])
</script>
  • 也可將多個 Checbox 綁定到同一個 state

Line 3

<input type="checkbox" value="Apple" v-model="checked" />
<input type="checkbox" value="Google" v-model="checked" />
<input type="checkbox" value="Microsoft" v-model="checked" />
  • value：Checkbox 欲綁定的值
  • v-model：多個 Checkbox 綁定到同一個 state

Line 11

<div>{{ checked }}</div>
  • 單一 Checkbox 的 state 為 Array

Options API

<template>
  <div>
    <input type="checkbox" id="apple" value="Apple" v-model="checked" />
    <label for="apple">Apple</label>
    <input type="checkbox" id="google" value="Google" v-model="checked" />
    <label for="google">Google</label>
    <input type="checkbox" id="ms" value="Microsoft" v-model="checked" />
    <label for="ms">Microsoft</label>
  </div>
  <div>{{ checked }}</div>
</template>

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

Conclusion

  • Checkbox 一樣可以使用 v-model 綁定
  • 多個 Checkbox 綁定值是 Array，可透過 value attribute 改變其綁定值

Reference

Vue, 複選框

# Vue