錯誤方式（復選框與數組綁定）
<template>
<!-- 復選框？-->
<div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames.arr" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames.arr" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames.arr" />
<label for="mike">Mike</label>
<br />
<span>Checked names: {{ checkedNames.arr}}</span>
</div>
</template>
<script setup>
import {reactive} from "vue";
const checkedNames = reactive([])
</script>
正確方式
<template>
<!-- 復選框？-->
<div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames.arr"/>
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames.arr"/>
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames.arr"/>
<label for="mike">Mike</label>
<br/>
<span>Checked names: {{ checkedNames.arr }}</span>
</div>
</template>
<script setup>
import {reactive} from "vue";
const checkedNames = reactive({
arr:[]
})
</script>
<style scoped>
</style>
