脚本宝典收集整理的这篇文章主要介绍了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>
以上是脚本宝典为你收集整理的vue3 双向绑定 失效全部内容,希望文章能够帮你解决vue3 双向绑定 失效所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。