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

最新推荐文章于 2024-01-12 17:32:34 发布
最新推荐文章于 2024-01-12 17:32:34 发布
阅读量3.6k 收藏 3
点赞数 7
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guojun19900715/article/details/134446364
版权

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

在这里插入图片描述

<el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="handleClose"
  >
</el-dialog>

1. 经过多次反复尝试, 导致警告的原因就是 v-model=“dialogVisible” 这行代码

2. 将 v-model=“dialogVisible” 直接替换成 :model-value=“dialogVisible” 就可以解决了

guojun@07
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js报错Failed to resolve filter问题的解决方法
10-22
在使用Vue.js进行前端开发时，开发者经常会遇到各种问题，其中一个比较常见的问题就是关于过滤器（filter）的错误。当在控制台发现报错信息"Failed to resolve filter:HomePage"时，可能会引起困惑，因为这可能指向...
vue v-on:click传递动态参数的步骤
10-14
主要介绍了vue v-on:click传递动态参数的步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 报错 Set operation on key “xxx“ failed: target is readonly.
最新发布
Grace_yue_wr的博客
01-12 2386
由于原来做的组件代码行太多并且有个抽屉组件被复制粘贴3次，按照我的习惯，同段代码被引用3次以上就要做组件抽离方便后续维护。
Set operation on key “visible“ failed target is readonly
m0_59092234的博客
03-11 8032
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.
「Vue3」封装el-dialog报警告 — [Vue warn] Set operation on key “visible“ failed: target is readonly.
W-Mo-Mo的博客
07-13 2822
「Vue3」封装el-dialog报警告 — [Vue warn] Set operation on key "visible" failed: target is readonly. 这里直接贴全部的代码，有需要可以自行取阅
Set operation on key “visible“ failed: target is readonly.
星夜辰的博客
12-02 9141
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...
Set operation on key “default“ 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 “pageDataTitle“ failed: target is readonly 去除警告
qq_46468347的博客
06-10 1302
这个错误提示表明在尝试对只读属性"pageDataTitle"进行设置操作时出现了问题。同时还提到了"watch.immediate"，这可能与Vue的watch选项有关。来立即执行watch的处理函数。然而，在这种情况下，"pageDataTitle"属性可能被设置为只读，而无法通过watch来修改它。当你使用Vue的watch选项来监听某个属性时，可以通过设置。
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 报错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: ...
2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop “index”.
01-08
1.在写循环的时候遇见这个的 原创文章 96获赞 50访问量 6万+ 关注 私信 展开阅读全文 作者：itwangyang520
Vue3 响应性基础 API-- readonly
weixin_41489378的博客
01-05 937
基本用法 接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理。 const original = reactive({ count: 0 }) const copy = readonly(original) watchEffect(() => { // 用于响应性追踪 console.log(copy.count) }) // 变更 original 会触发依赖于副本的侦听器 original.count++ // 变更副本将失败并导致警告 copy.count
[Vue warn] Set operation on key “xxx“ failed: target is readonly. Element-UI踩坑分享！！！
m0_53532783的博客
06-02 1733
1. Vue3 使用父组件传值给封装好的 el-dialog 子组件控制弹窗显示隐藏。2. 然后在子组件修改这个值。3. 就报了以下警告。
Vue3 + Vue-cli (1) 基础篇
小草莓的博客
01-09 5343
一、官网 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、..
Vue3 文档学习笔记
徐忠炜的博客
12-15 656
vue3学习笔记 setup() 生命周期的与vue2的不同点在：beforeCreated、created都在setup()里进行默认调用，其他的都要写在setup()里面，算做compositionAPI。 props由父组件传过来的值会自动被响应式，不用再去reactive包一层（注意不能在子组件里直接修改props的值）。 setup()的第一个参数是props(不可进行解构，否则会丢失双向绑定)，第二个参数是context,有3个值 attrs,slots,emit,(可进行解构) props:
实现vue3 readonly 操作
wx479的博客
10-27 1252
//主入口函数 const readonlyMap = new WeakMap(); const objectToString = Object.prototype.toString; const readonlyGet = createGetter(true); function createGetter(isReadonly = false, shallow = false) { return function get(target, key, receiver) { .
vim下编辑却显示readonly的解决方法 E325: ATTENTION E45: 'readonly' option is set (add ! to override)
weixin_43749051的博客
01-29 1780
那是因为文件的属性是只读属性 假设我的文件为a.py，在强制退出时，有时会生成.swp文件，反正处理起来相当麻烦。 接下来我会出两种方法，第一种适合单次操作，第二个一劳永逸。 第一种情况， 你已经编写完发现出现readonly时，你可以wq!退出，vim会自动保存。 第二种情况， 你想要完全不再跳出这个烦人的页面，你可以 在命令行输入 rm -r .a.py.s...
Vue 3 开发文档
LGD_Sunday的专栏
07-28 8556
本博客会长期更新（在 Vue 的中文官方文档没有发布前）。 博客的边界：本博客只会带来 Vue 3 新增内容的整理文档（经过验证的） 重点内容： Vite Composition API 新的响应式机制 计算属性和侦听器 利用 vite 创建下一代的 Vue 项目 两个重要的点： Vue CLI v4.5 之上的版本 Vite Vue CLI 想要构建 Vue 3.x 项目，那么需要使用 Vue CLI v4.5 之上的版本 yarn global add @vue/cli@next # or
[Vue warn] Set operation on key "imgArr" failed: target is readonly.
07-08
Vue.set(object, key, value) ``` 其中，object是你要修改的对象，key是要修改的属性名，value是要设置的新值。 3. 如果该属性确实需要是只读的，可以在Vue组件中使用computed属性来获取该属性的值，并在需要的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值