vue3 双向绑定 失效

错误方式(复选框与数组绑定
<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>

 

 



TRANSLATE with x English
Arabic Hebrew Polish
Bulgarian Hindi Portuguese
Catalan Hmong Daw Romanian
Chinese Simplified Hungarian Russian
Chinese Traditional Indonesian Slovak
Czech Italian Slovenian
Danish Japanese Spanish
Dutch Klingon Swedish
English Korean Thai
Estonian Latvian Turkish
Finnish Lithuanian Ukrainian
French Malay Urdu
German Maltese Vietnamese
Greek Norwegian Welsh
Haitian Creole Persian  
  TRANSLATE with COPY THE URL BELOW Back EMBED THE SNIPPET BELOW IN YOUR SITE Enable collaborative features and customize widget: Bing Webmaster Portal Back