当前位置:   article > 正文

[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declar

[vue warn]: avoid adding reactive properties to a vue instance or its root $

在开发中,这是一个vue2的老项目改成vue3的。突然遇到一个bug,寻找了最后发现是vue2和vue3版本不同造成问题。
在这里插入图片描述

大概就是 input标签双向绑定一个对象里面的某个字段。

setup部分

const form = ref({ pushContent: "" });
    return {
      form,
    };
  • 1
  • 2
  • 3
  • 4

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

问题所在:在这里插入图片描述

把这里的ref属性设置的值,不能和setup里面需要用到双向绑定的变量的名字一样。

在这里插入图片描述

  • 因为在vue2中 ,这样子使用ref,可以用$refs.form得到这个dom。
  • 但是在vue3中,本身定义变量的会使用到ref,所以如果你用ref定义的变量和你在标签中ref属性的值一样,那么vue会自动转换成类似于vue2中的$refs的用发,上面的form的值就不是我自己定义的对象,而是标签中的dom。

关于vue2中ref在vue3中的使用 可参考官网地址 : 点击进入官网

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/248228
推荐阅读
相关标签
  

闽ICP备14008679号