在开发中,这是一个vue2的老项目改成vue3的。突然遇到一个bug,寻找了最后发现是vue2和vue3版本不同造成问题。
大概就是 input标签双向绑定一个对象里面的某个字段。
setup部分
const form = ref({ pushContent: "" });
return {
form,
};
html部分
<el-form ref="form" :model="form" size="small" label-position="top">
<h3>推送设置</h3>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="推送内容">
<el-input
v-model="form.pushContent"
placeholder="请输入推送内容"
></el-input> </el-form-item
></el-col>
</el-row>
</el-form>
问题所在:![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b8007821f4a146c83f5efdd380f102c1.png)
把这里的ref属性设置的值,不能和setup里面需要用到双向绑定的变量的名字一样。
- 因为在vue2中 ,这样子使用ref,可以用$refs.form得到这个dom。
- 但是在vue3中,本身定义变量的会使用到ref,所以如果你用ref定义的变量和你在标签中ref属性的值一样,那么vue会自动转换成类似于vue2中的$refs的用发,上面的form的值就不是我自己定义的对象,而是标签中的dom。