Vue3 使用 reactive/ref v-model el-form 无法双向绑定的问题
Vue3 无法 绑定 model Form 双向 el ref
2023-09-11 14:16:38 时间
原文地址:https://blog.csdn.net/weixin_52937671/article/details/125206278
原因是:ref 挂载的变量名 和 v-model 同名了。
错误示范:
<!-- error -->
<van-form ref="form"> <van-field v-model="form.name" name="name" label="姓名" placeholder="请输入您的姓名" /> </van-form> <script setup lang="ts"> const form = reactive({ name: '', }) </script>
正确示范:只要不重名即可,但为了规范,最好还是让 ref 绑定的值采用 $form 这种格式。
<!-- ok --> <van-form ref="$form"> <van-field v-model="formData.name" name="name" label="姓名" placeholder="请输入您的姓名" /> </van-form> <script setup lang="ts">
const $form = ref(null) const formData = reactive({ name: '', }) </script>
相关文章
- 【Vue3】Vue3中的hooks函数示例(图文+代码)
- [转]tsx开发vue3:从零到全面覆盖
- vue3学习笔记(动态组件)
- vue3中使用ref语法糖
- Vue3+elementplus搭建通用管理系统实例七:通用表格实现上
- Vue3中使用Sass详解
- 浅析Vue3中如何通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定
- 浅析Vue3使用reactive/toRefs+v-model导致响应式失效el-form表单无法输入的问题
- vue3:安装配置sass
- 8.0 vue3生命周期
- 1.0 vue3数据变量的声明(ref & reactive)
- vue3中部分api(生命周期等hook)只能在setup中使用,如何实现的