【vue】Prop being mutated: “placement“

最新推荐文章于 2022-10-26 15:46:13 发布
最新推荐文章于 2022-10-26 15:46:13 发布
阅读量2.1k 收藏 3
点赞数 3
分类专栏： vue 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42866036/article/details/125767448
版权

问题现象：

控制台错误信息： [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “placement”
在这里插入图片描述
vue版本：element-ui@2.15.9 (npm list 即可查看版本)

原因分析：

高于2.15.6版本的element-ui在date-picker组件新增了一行直接修改placement的代码

    this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left;

在这里插入图片描述

在这里插入图片描述

解决方法：

  1. 查看package.json文件中element-ui的版本号
    在这里插入图片描述
  2. 版本号是以^开头（表示安装2.0最高版本），先卸载，再重装element-ui，即可解决
    npm uninstall element-ui
npm install element-ui@2.15.6
Carol的测试之路
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3学习笔记-07
JZYCLL的博客
07-23 253
Vue3学习笔记-07 一、组件嵌套 在实际开发中，可以定义一个app组件来管理其他所有的组件 <div id="root"> <school></school> </div> <script> //创建user组件 const user = Vue.extend({ template:` <div>
vue-glitch::ghost: Vue.js 组件可以在任何类型的文本中应用毛刺效果
08-04
Vue 故障 :ghost: Vue.js 组件在任何类型的文本中应用毛刺效果安装$ npm i -S vue-glitch# or$ yarn add vue-glitch全球注册 // main.jsimport Vue from 'vue' ;import Glitch from 'vue-glitch' ;Vue . component ...
控制台Prop being mutated: “placement“报错解决方案
qq_49642079的博客
06-29 3274
vue 日期问题，picker
“placement“问题Prop being mutated: “placement“
OUSHAOXIAN的博客
08-12 381
"placement"问题
Vue3+Element-Plus 实现在表单中自定义操作按钮 三二
build2024
12-21 1万+
1. 实现效果 分析需求 1. 首先操作列并不对应任何的数据结构，所以想要实现在列表中操作列增加按钮来实现编辑或者删除，必须要拿到对应的Id,才能进行数据操作。 2. 所以要拿到对应的Id，必须通过使用作用域插槽来实现操作列的渲染 2. 实现步骤 2.1 定义作用域插槽步骤 定义template 结构，在template 结构中定义v-slot="scope" 并定义一个scope接收 通过 scope.row 获取到当行前的数据 例如： 如下图，通过作用域的方式取到当...
不更改版本 element ui el-date-picker 报错 Prop being mutated: “placement“解决
空空墓志铭的博客
08-06 6421
element ui el-date-picker 报错 Prop being mutated: “placement“，不变更版本解决报错问题
vue element ui el-popover 样式修改不生效解决方法
qq_37916164的博客
08-06 6346
这四种样式穿透都不起作用， 这是因为 el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style。在使用element 的el-popover 组件时，会发现自己对el-popover 写的样式不起作用，甚至连使用。首先给它添加一个特定的类名 , 千万别重复 , 语义命名以免样式污染。在当前文件样式中 不加scoped写一份。...
Vue面试资源 难度：中等
11-17
一、Vue面经文档 题目类型：Vue面试资源 难度：中等 覆盖范围：Vue基础知识、Vue组件通信、Vue路由、Vuex等。 1. 请简要介绍一下Vue的核心概念和特点。 2. Vue的生命周期钩子有哪些？它们分别在什么时候执行？ 3. 请...
Vue3+TS：实现小红书瀑布流虚拟列表组件.zip
最新发布
04-03
Vue3+TS：实现小红书瀑布流虚拟列表组件.zip
Vue实验一源代码：登陆界面
10-14
Vue实验一源代码：登陆界面
vue3-examples:vue3的例子
05-06
Vue3.0 学习相关 :hourglass_done: 最近更新时间：:keycap_2: :keycap_0: :keycap_2: :keycap_1: / :keycap_0: :keycap_2: / :keycap_2: :keycap_0: :hourglass_not_done: :eyes: 本人会在仓库内更新一些 Vue3.0 ...
记录Element 日期选择器 报错 [Vue warn]:Prop being mutated: “placement“
meixinmeifei__的博客
10-26 306
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"
Prop being mutated: “placement“ ElementUI日期选择器渲染报错问题解决方案（不退回版本）
weixin_54600588的博客
09-06 501
虽然看到网上有很多反馈，但解决方案都是退回到旧版本，不过经过我个人的实践，2.15.1这个版本依旧有placement赋值这个操作，换句话说这个退回版本的方案并不适合与我。这个错误的产生是由于elementUI在某一个版本中，直接给placement这个props父级属性赋值导致Vue出现的报错。不过功夫不负有心人，通过网友的提醒，咱们还是找到了另一条解决问题的道路，那就是给组件的align属性赋值。
vue组件传值报错： Instead, use a data or computed property based on the prop‘s value. Prop being mutated: “
热门推荐
sunshineTing2的博客
09-30 1万+
问题 问题：在单选组件（radio）切换后，修改了来自父组件的值（item），然后报错如下： 原因 prop是单向绑定，不能更改数据，只能由父组件传输过来 解决 1、可以在子组件中 声明一个中间变量（value），把父组件传过来的值(item)赋值给中间变量(value),当单选切换时修改的数据为value,就不会报错 2、使用.sync修饰符与$emit(update:xxx) 父组件 <comp :item.sync="item"></comp> 子组件 this.$emit
解决uniapp Prop being mutated: "placeholder"报错
ten_yearM的博客
05-06 5620
想要解决的问题：封装一个组件A，组件A的placeholder有默认值，但又有几处需要从父组件传入自定义值，即想要父组件有传值时使用父组件，没有传值使用默认（默认有分情况或者使用语言包，‘default’用不了），本文不解决Prop双向绑定。 报错信息： Avoid mutating a prop directly since the value will be overwritten whene...
【vue】基于ElementUI封装了一个自定义Table组件
coralime的博客
03-21 3754
【代码背景】 最近写了10+表，上线以后时不时要改需求，一旦改动就是10+的工作量，所以决定把表格抽离出来单独写个组件，方便以后复用修改，这应该是写过最复杂的组件封装了，特此记录，小白一枚，接触vue也没多久，欢迎大家学习交流哦。 开发环境：vue + element ui 【准备工作】 封装组件的目的是方便复用，也就是多个地方引用相同或相似的组件功能，所以在封装之前一定要弄清楚，针对目前的Table需要封装哪些功能，有哪些共性可以抽离出来。这部分的思考非常重要，是影响组件封装质量的重要权衡点，所以
vue中实现拖拽功能
weixin_54523278的博客
05-28 6282
自定义的全局指令 提示：拖拽指令 文章目录自定义的全局指令一、拖拽1.自定义拖拽指令2.页面挂载3.css样式 提示：以下是本篇文章正文内容，下面案例可供参考 一、拖拽 1.自定义拖拽指令 代码如下（示例）：仅供参考 data(){ return { params:'' } }, directives: { // 自定义拖拽指令，先声明这个指令 drag(el) { // 可就在里写指令的js代码 const oDiv = el // 当前元素
element ui 控制台报 Prop being mutated: “placement“
weixin_45591598的博客
07-29 753
最近写项目一直报，报了几天了，一直没时间解决，开始还以为是啥子组件改了父组件传的值才报错，可是我整个项目都搜不到"placement"，所以根本就不是父子组件的问题！！！！好气！！
使用elementui里的时间选择器报错：Prop being mutated: “placement“
qq_44161722的博客
09-01 365
vue.runtime.esm.js?2b0e:4573 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"
[vue warn]: avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. instead, use a data or computed property based on the prop's value. prop being mutated: "placement"
06-28
### 回答1： 这个警告是因为在子组件中直接修改了父组件传递过来的 prop 值，而这个值会在父组件重新渲染时被覆盖。为了避免这种情况，应该在子组件中使用一个基于 prop 值的 data 或 computed 属性来代替直接修改 prop 值。在这个警告中，被修改的 prop 是 "placement"。 ### 回答2： 这条警告信息是针对 Vue 组件中的一个 prop（属性）——"placement" 的直接修改而发出的。在 Vue 组件中，props 是通过父组件向子组件传递数据的方式之一。不同于在组件的 data 选项中初始化的变量，在组件中定义的 props 是单向传递的，是父组件向子组件传递的数据源，子组件只能从 props 中读取数据，而不能直接修改。 在 Vue.js 中，如果一个子组件直接修改了 props 的值，那么 Vue 会发出这样的警告。因为直接修改 props 的值会导致子组件与父组件之间的数据失去同步，而且父组件在更新自己的数据时也可能会覆盖掉子组件直接修改的值，从而引发不可预测的问题。 解决这个问题的方法是：在子组件中定义一个与 "placement" prop 相关的 data 或 computed 属性，通过修改这个属性的值来实现与该 prop 相关的功能。这种方式可以保证子组件中定义的数据与父组件中传递过来的 props 始终保持同步，同时也不会影响父组件中的数据更新操作。 关于使用 data 或 computed 属性来响应 props 的变化的区别，一般来说，如果 prop 的值对应着一个组件内部需要响应的变化，那么可以使用 data 属性来定义一个与 prop 相关的变量。如果 prop 的值需要经过计算才能得出相应的结果，可以使用 computed 属性来定义一个计算属性，根据需要通过 prop 的值进行计算，得到最终的结果。无论使用哪种方式，都需要注意不要直接修改 prop 的值，避免引发不必要的问题。 ### 回答3： Vue在控制台输出“vue warn: 避免直接修改prop的值，因为当父组件重新渲染时，该值会被覆盖。应该使用基于prop值的data或computed属性。”错误信息提示，在一个组件中，一个prop被修改了，而且是直接在子组件中修改的，这样会导致子组件不能保证从父组件得到的prop的值与父组件的值一致，从而引发问题。 针对该问题，我们需要注意以下两点： 第一点，在子组件中不要直接修改传递进来的prop。我们需要了解Vue的响应式特性，如果我们直接修改了传递进来的prop，那么在父组件重新渲染时，该值将会被覆盖。Vue通过比较新值和旧值的操作来进行优化，如果新值和旧值相等，那么就不会执行组件更新操作。由于直接修改prop的值将导致组件和父组件的数据不一致，因此Vue框架会发出警告。 第二点，我们应该通过定义一个computed属性或者一个响应式的data属性来间接修改prop的值，保证子组件中的值与父组件中的值同步。由于Vue是响应式框架，我们可以定义一个computed属性或者响应式的data属性，通过该属性来间接修改prop的值，从而保证子组件中的值和父组件中的值一致。当我们修改了这个属性的值时，该操作不会对父组件的数据造成影响，同时也不会打破父组件和子组件之间的数据传递。 综上所述，我们需要在开发Vue组件时严格遵循Vue框架的响应式特性，不要直接修改传递进来的prop的值，而是应该通过定义一个computed属性或者响应式的data属性来间接修改prop的值，保证子组件中的值和父组件中的值同步，从而避免出现不必要的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值