vue3使用响应式数据 + v-model导致响应式失效el-form表单无法输入的问题
参考文章
重构vue2项目时发现的问题，原始项目使用的是Element-ui。
其实vue3可以使用适配的Element-plus
问题描述
- el-form表单无法输入
- 控制台报错
Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.使用响应式变量时应先声明
解决办法
由于 ref 命名和 model 的值一样导致出现了这样的问题。文章来源：https://www.toymoban.com/news/detail-615112.html
<el-form ref="service" :model="service" label-width="80px">
<el-form-item label="名称">
<el-input v-model="service.name"></el-input>
</el-form-item>
......
</el-form>
setup() {
const state = reactive({
service: {
name: '**'
}
})
return {
...toRefs(state)
}
}
原因就是 el-form 声明了ref=“service”，导致 state 中声明的 service 被覆盖，2者冲突了。文章来源地址https://www.toymoban.com/news/detail-615112.html
到了这里，关于vue3使用响应式数据 + v-model导致响应式失效el-form表单无法输入的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
