ue warn] Set operation on key “modelValue“ failed: target is readonly. 警告

AAaaa11112123

已于 2024-08-02 11:14:35 修改

阅读量418

点赞数 4

文章标签： vue.js node.js typescript

于 2024-08-02 10:55:18 首次发布

本文链接：https://blog.csdn.net/AAaaa11112123/article/details/140866769

版权

在对组件进行在封装时我们会遇到一个 ue warn] Set operation on key "modelValue" failed: target is readonly. 的警告

我的组件内部是这样封装的

这里是Vue官网的V-model的原理

分析原因后发现是在v-model的基础上再次封装v-model时v-model的update事件事实上直接修改了props 但是props是只读的并且没有调用自己封装的emis updata 我的以下是我的解决方案

原理是使用computed进行绑定将取值和赋值进行拆分，赋值时调用更新函数。当然也可以将原有组件的v-model拆封为modelValue updeta:modelValue 在updeta:modelValue的事件函数中调用自己的emit进行在上层的更新。

------分隔符------

好的我最后选择的是属性透传

利用属性透传直接传递v-model

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AAaaa11112123

关注关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“

郭宝的博客

06-24

11万+

错误场景一：错误提示：在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解...

邮件常见异常：javax.mail.MessagingException: Could not connect to SMTP host

简简单单Onlinezuozuo

09-09

2万+

文章目录邮件常见异常：javax.mail.MessagingException: Could not connect to SMTP host1、异常触发2、Failed message 1: javax.mail.MessagingException: Could not connect to SMTP host: smtpdm.aliyun.com, port: 465, response:...

1 条评论您还未登录，请先登录后发表或查看评论

vue3 报错 Set operation on key “xxx“ failed: target is readonly.

热门推荐

Yukinoshita_kino的博客

05-25

2万+

一. 场景 vue3.0搭建的项目二. 警告分析点击reactivity.esm-bundler.js这一处后发现报警告处如下：当不在production环境下就会报出该警告，我查看代码，对应的地方就是使用到了reactive方法和ref方法，目前我并没有看出有哪里写错，于是我决定找到该js文件然后注释该警告。三. 解决办法注意：VScode编译器中无法通过搜索找到该文件。reactivity.esm-bundler.js文件的位置如下： node_modules/@vue/reactivit

Set operation on key “xxx“ failed: target is readonly.VUE3+element-plus 引起的警告

qq_37054845的博客

03-01

1万+

Set operation on key “xxx“ failed: target is readonly.VUE3+element-plus 引起的警告

[Vue warn] Set operation on key “dialogVisible“ failed: target is readonly

Guojun19900715的博客

11-16

3794

el-dialog对话框关闭时控制台警告: [Vue warn] Set operation on key "dialogVisible" failed: target is readonly

[Vue warn] Set operation on key “xxx“ failed: target is readonly. Element-UI踩坑分享！！！

m0_53532783的博客

06-02

1862

1. Vue3 使用父组件传值给封装好的 el-dialog 子组件控制弹窗显示隐藏。2. 然后在子组件修改这个值。3. 就报了以下警告。

[Vue warn]: $attrs is readonly；Webpack externals 配置

weixin_34242509的博客

04-16

3511

项目报错 [Vue warn]: $attrs is readonly. [Vue warn]: $listeners is readonly. 复制代码原因重复引入 Vue 解决方法在webpack中配置上： externals: { vue: { root: 'Vue', commonjs: 'vue', commonjs2: 'vue', ...

成功解决Fit Failed Warning: Estimator fit failed. The score on this train-test partition for these param

近期请国内外头部出版社可尽快私信博主！——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…

07-21

1万+

成功解决Fit Failed Warning: Estimator fit failed. The score on this train-test partition for these parameters will be set to nan. Value Error: Solver lbfgs supports only 'l2' or 'none' penalties, got l1 penalty. 目录解决问题解决思路解决方法解决问题 F:\Pr

十：WARN yarn.Client: Neither spark.yarn.jars nor spark.yarn.archive is set,解决案例

weizhonggui的博客

12-25

7352

在spark on yarn 上提交任务是，报错如下：这是Spark的一个优化点： WARN yarn.Client: Neither spark.yarn.jars nor spark.yarn.archive is set, falling back to uploading libraries under SPARK_HOME. INFO yarn.Client: Uploading re...

Set operation on key “visible“ failed target is readonly

m0_59092234的博客

03-11

8210

vue3 报错 Set operation on key “visible” failed: target is readonly. 变量visible只读属性，无法修改。解决：visible 改成响应式 // 原先visible 从props.modal获取， const { modalData: { visible }} = props //修改 const { modalData: { visible }} = props const visibleNew = ref(visib.

Set operation on key “pageDataTitle“ failed: target is readonly 去除警告

qq_46468347的博客

06-10

1375

这个错误提示表明在尝试对只读属性"pageDataTitle"进行设置操作时出现了问题。同时还提到了"watch.immediate"，这可能与Vue的watch选项有关。来立即执行watch的处理函数。然而，在这种情况下，"pageDataTitle"属性可能被设置为只读，而无法通过watch来修改它。当你使用Vue的watch选项来监听某个属性时，可以通过设置。

Vue3 响应性基础 API-- readonly

weixin_41489378的博客

01-05

969

基本用法接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理。 const original = reactive({ count: 0 }) const copy = readonly(original) watchEffect(() => { // 用于响应性追踪 console.log(copy.count) }) // 变更 original 会触发依赖于副本的侦听器 original.count++ // 变更副本将失败并导致警告 copy.count

Vue 子组件直接修改 props 中的属性值（单向数据流）

Microven

03-02

1万+

理论所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。 Vue3 Props 文档尝试通过下面的方法直接修改属性值 this.$props.modelValue

Set operation on key “visible“ failed: target is readonly.

星夜辰的博客

12-02

9371

vue3 报错 Set operation on key "visible" failed: target is readonly. 变量visible只读属性，无法修改。解决：visible 改成响应式 // 原先visible 从props.modal获取， const { modalData: { visible }} = props //修改 const { modalData: { visible }} = props const visibleNew = ref...

vue3.0响应式原理（二）

yydounai的博客

10-29

763

Vue3的响应式主要是通过proxy handlers来实现的，上一节有讲，Vue3的proxy handlers分为baseHandlers与collectionHandlers，这里主要讲baseHandlers。baseHandles又分为mutableHandlers与readonlyHandlers，顾名思义后者是只读的handlers export const mutableHan...

bootstrap table中文文档_Vue3.0文档 VS Vue2.x文档有哪些不同

weixin_39535287的博客

11-20

631

尤大宣布 Vue3.0 已经进入候选阶段【贺电】！！！现在也可以提前试用，通过 Vite 直接初始化一个项目。另外 Vue3.0 的文档也已经上线，感兴趣的小伙伴可以先睹为快。另外指路 ➡️ 之前发布过的 Vue3 的部分 API手册。概览Vue3.0 新功能Composition API----组合式 API，包括setup()等Reactivity API----响应式系统 API，包括ref...

Vue3 + Vue-cli (1) 基础篇

小草莓的博客

01-09

5606

一、官网 Vue3 官网：https://v3.cn.vuejs.org/ Vue-cli 官网：https://cli.vuejs.org/zh/ 二、Vue3的新特性 01、Vue3 采用渐进式开发，向下兼容 02、性能提升打包大小减少41% 初次渲染快55% 更新快133% 内存使用减少54% 03、Composition API集合，解决Vue2组件开发问题 04、新的API加入 Teleport瞬移组件 Suspense解决异步加载组件问题 05、..

[Vue warn] Set operation on key "imgArr" failed: target is readonly.

07-08

这个错误通常发生在Vue组件中，表示试图在只读的数据上进行修改。可能是因为你尝试直接修改一个响应式对象的属性，而这个属性是只读的。要解决这个问题，你可以尝试以下方法： 1. 检查代码中是否有对该属性进行了赋值或修改操作。确认是否有在Vue组件中直接修改了响应式对象的属性。 2. 如果你需要对该属性进行修改，可以考虑使用Vue提供的set方法来实现。示例代码如下： ```javascript Vue.set(object, key, value) ``` 其中，object是你要修改的对象，key是要修改的属性名，value是要设置的新值。 3. 如果该属性确实需要是只读的，可以在Vue组件中使用computed属性来获取该属性的值，并在需要的地方使用computed属性代替直接访问该属性。希望以上方法可以帮助到你解决这个问题！如果还有其他问题，请继续提问。