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

最新推荐文章于 2024-08-08 15:28:54 发布
最新推荐文章于 2024-08-08 15:28:54 发布
阅读量1.1w 收藏 2
点赞数 6
文章标签： vue.js 前端 javascript 前端框架 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/romantic6666/article/details/128577060
版权

报错详情图：

[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

大概意思就是说 避免在运行时向Vue实例或其根$data添加反应性属性-在数据选项中预先声明它。

他让我们在$data添加属性，我们就进行添加

可以先在按钮里面定义一个属性，名字随意，如图

 然后在data里面将他return回去就行

 报错消失，问题解决

希望能有所帮助

日月先生
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-next/runtime-core 源码阅读指南详解
10-16
Vue-next 是 Vue 3.x 的核心库，其中 runtime-core 模块是它的核心部分，负责处理组件的渲染、响应式系统、生命周期以及其他核心功能。本文将详细介绍如何阅读和理解 vue-next/runtime-core 的源码。 首先，阅读...
vue-count-to:vue-countTo的改造版本，支持 vue 2.0、3.0 版本
04-30
vue3-count-to基于 vue-count-to 升级改造预览目的由于原有作者好像没打算升级版本，故而自己升级维护一下。兼容当前版本同时兼容 vue2、vue3，亦能在ts下使用运行环境已经测试的运行环境，vite建议使用2.0+，...
Avoid adding reactive properties to a Vue instance or its root $da
2201_75783276的博客
06-20 393
避免在运行时向Vue实例或其根$data添加反应性属性-在数据选项中预先声明它。在页面中声明对象，直接修改即可。
Avoid adding reactive properties to a Vue instance or its root $data at runtime - declar
weixin_42091569的博客
06-20 3049
大家好我是王超朋: 想更快更有效率的结局bug,那就必须迅速的定位问题,找出和原因,但是我们在使用第三方框架时,有是有的bug让人找不到眉目.最简单的办法,就是吧他们的源码阅读一遍. 咋们看一下抛出该异常的代码块: /** vue.$set 函数 */ function set (target , key, val) { // 在生产模式下,isPrimitive是不是基本类型, if (process.env.NODE_ENV !== 'production' &&.
报错：Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfr
热门推荐
HELLO WORLD
04-01 3万+
报错内容： Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option. 报错代码 为啥会报错？ 知识点 受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转...
Avoid adding reactive properties to a Vue instance or its root $data at runtime
Misnice的博客
11-17 1万+
[Vue warn]: Avoid adding reactive properties to a Vue instance or its root dataatruntime−declareitupfrontinthedataoption.![在这里插入图片描述](https://img−blog.csdnimg.cn/0657961c352a4a77b5cf032ad72f4f3e.png)报错原因：this.data at runtime - declare it upfront in the dat
Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront
qq_40860800的博客
02-22 7579
小程序中 [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option. 上面报错的意思是没有在data中预先声明某一变量； 昨天不是说了在uni-app项目中重写了setData方法嘛，我记得微信小程序中使用this.setData({})时不提前声明变量是可以的，所以就习惯性的使用了，结果就一直报这
vue2.7[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime -
qq_42372534的博客
09-19 400
经过排查,报错原因是因为setup语法糖中返回了。使用vue2.7的setup语法糖中,绑定了。的变量同名了,改一下使其不同名字即可。
vue 出现data-v-xxx的原因及解决
10-15
在Vue.js框架中，`data-v-xxx` 是一个特殊的属性，它的出现是由于Vue的CSS作用域限制策略。Vue通过添加这个唯一的标识来实现组件内部样式的隔离，避免样式冲突。当我们在Vue组件的 `<style>` 标签中使用 `scoped` ...
Vue 报错TypeError: this.$set is not a function 的解决方法
12-12
报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应 报错代码： methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: ...
在Vue中获取自定义属性方法:data-id的实例
10-14
在Vue.js框架中，自定义属性是扩展组件功能的一个常见方式。`data-id`就是一个自定义属性，通常用于标识或区分不同的元素。本篇将详细解释如何在Vue中使用`data-id`以及与之相关的其他知识点。 1. **获取自定义属性...
Vue2.7 setup v-model报错Avoid adding reactive properties to a Vue instance or its root $data
weixin_43187898的博客
02-23 423
会报错vue.runtime.esm.js:4625 [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.是因为ref 也是numberValidateForm，所以只要把ref=“numberValidateForm” 换个名字就可以了。拷贝了一个elment form demo。
十三.vue源码学习之响应式数据
TyrionJ的博客
04-17 531
date: 2020-04-15 tag: sourcecode vue author: TyrionJYQ title: 十三. 响应式数据 响应式数据 Object.defineProperty 代理 代理props vue将配置项中的props属性代理到vm上 const vm = new Vue({ props: ['msg'] }) 通过this.msg能够访问到props...
【vue warning】avoid mutating a prop directly
u010671652的专栏
10-28 1万+
[vue warning] avoid mutating a prop directly 一、问题描述 使用props，通过父组件给子组件传值，子组件在使用props中的属性时，直接对props中的属性进行了修改。修改方式为直接对props中的属性赋值，或者使用双向绑定。 父组件代码： <categroy :course="item" /> 子组件代码： <template&...
vue的diff算法的【双端比较】策略
最新发布
yiguoxiaohai的博客
08-08 346
vue的diff算法的双端比较策略
[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.
06-02
这是一个 Vue.js 的警告，意思是在运行时避免向 Vue 实例或其根 $data 添加响应式属性，而应该在 data 选项中提前声明它。这是因为 Vue.js 在初始化时会对 data 中已经存在的属性进行响应式处理，但是对于后添加的属性则无法实现响应式更新。因此，为了避免出现不可预期的问题，建议在 data 选项中提前声明所有需要响应式处理的属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值