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>

 

 



posted @ 2022-04-20 01:24  键盘路漫漫  阅读(1124)  评论(0)    收藏  举报