[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c

最新推荐文章于 2024-09-06 10:38:18 发布

原创最新推荐文章于 2024-09-06 10:38:18 发布 · 666 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端同时被 2 个专栏收录

59 篇文章

订阅专栏

vue

57 篇文章

订阅专栏

本文介绍了一个常见的Vue警告，即直接修改Prop值导致的问题，并提供了解决方案。使用ElementUI版本2.15.8时可能会遇到此警告，通过降级ElementUI版本可以消除该警告。

[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”

element ui版本问题

报错提示：vue.runtime.esm.js?2b0e:619 [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”

found in

—> at packages/date-picker/src/picker.vue
at src/views/demo/index.vue
at src/App.vue

解决方案：我使用的 ElementUI 版本是 “element-ui”: “^2.15.8”，会出现这个报错提示，更换一个更低点的版本即可解决报错，不解决报错好像也不影响效果展示

// 卸载 elementUI 旧版本
npm uninstall element-ui
// 安装新版本
npm i element-ui -S
// 安装指定版本 
npm i element-ui@2.15.7 -S

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

淋雪小新

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

avoid mutating a prop directly since the value will be overwritten whenever完美解决

计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。

09-07

5万+

avoid mutating a prop directly since the value will be overwritten whenever完美解决，不要直接修改从父组件传过来的props数据，在data函数中重新定义一个变量，将props数据数据赋值在data变量上，后面修改data变量即可。既然在双向绑定时会出现问题，那么可以在子组件中定义一个data，然后把从父组件传递过来的数据通过props赋值给data，再把data绑定到v-model上。

前端开发：Vue报错Avoid mutating a prop directly since the value will be…的解决方法

全沾软贱开发攻城狮

07-25

1万+

前端开发中，在使用Vue开发的时候，经常会遇到一些很共性的报错提示，而且有时候提示已经很明确的告诉开发者问题出现在哪里，尤其是在Chrome的控制台输出上面，只要看一下输出日志就知道问题所在。但是对于一些刚入行的开发者来说，看日志的意识还没有养成，需要借助外力来解决问题，这样不是不可以，主要是要学会看输出的日志以及提示，这样才能很好的“对症下药”。httpshttpshttps。...

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

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent

xiaoyuer_2020的博客

07-05

2057

Vue报错

vue报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the

xueli_2017的博客

05-26

3万+

vue报错： [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...

【VUE】异常解决：Avoid mutating a prop directly since the value will be overwritten ...

热门推荐

2025 热爱与开始

07-03

8万+

author: jwensh date: 2021.06.29 文章目录1. 需求及报错2. 分析原因3、解决方案 1. 需求及报错需求：使用的场景是：A 组件中引用 B 组件，使用 v-model 给 B 传递参数，B 使用 props: { value } 接收内容，在 B 中根据逻辑直接修改并赋值 value，事件触发后在浏览器 console 里看到报错，内容如下： Avoid mutating a prop directly since the value will be overwri.

【Vue】报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent

Pulse的博客

05-15

1万+

当我们直接改变父组件的 props 值是会报以下警告： [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: “facomment” 会报错的原

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-

文龙刚的博客

09-06

6842

【代码】Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-

【VUE】异常解决：Avoid mutating a prop directly since the value will be overwritten

m0_67394006的博客

03-02

999

author: date: 2021.07.03 文章目录 1. 需求及报错 2. 分析原因 2.1 这是什么原因造成？ 3. 解决方案: 使用 v-on 明确实现修改方式 4. 参考 1. 需求及报错需求：使用的场景是：A 组件中引用 B 组件，使用 v-model 给 B 传递参数，B 使用 props: { value } 接收内容，在 B 中根据逻辑直接修改并赋值 value，事件触发后在浏览器 console 里看到报错，内容如下： Avoid mutating a .

报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren

weixin_42401141的博客

08-12

1088

Avoid mutating a prop directly

【Vue warn】: Avoid mutating a prop directly since the value will be overwritten whenever the parent..

WQH_Boss的博客

09-05

609

[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: "dialogShow"

报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren...

weixin_30888027的博客

08-05

542

vue中遇到的问题：转自：https://www.cnblogs.com/xxcanghai/p/6124699.html?_t=t vue2中组件的的props的数据流动改为了只能单向流动，即只能由组件外通过组件的dom属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。 prop 是单向...

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent..

qq_58062502的博客

02-06

5万+

vue子组件修改props报错： [Vue warn]: ’Avoid mutating a prop directly since the value will be …‘解决方法

前端不端钱的博客

06-22

7045

Vue 的数据绑定机制遵循单向数据流的原则，这意味着数据的流动是单向的，从父组件流向子组件。vue.runtime.esm.js：4448 [Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。：在 Vue 组件中，父组件可以通过 props 将数据传递给子组件。子组件不能直接修改通过 props 接收到的 props 数据，但可以将 props 数据复制到自己的 data 中，然后进行修改。）将数据变化通知给父组件。事件给父组件，去修改父组件的值i，从而不会打破单向数据流。

【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&...

最新发布

10-16

在 Vue 中，直接修改 prop 值出现 `[Vue warn]: Avoid mutating a prop directly...` 警告通常是因为在子组件中直接修改了父组件传递的 props 值。为避免该警告，可采用以下几种解决方案： 1. **使用事件机制**：通过 `$emit` 方法触发自定义事件，通知父组件进行数据修改。例如，子组件中触发事件： ```vue <template> <button @click="changeValue">修改值</button> </template> <script> export default { props: ['value'], methods: { changeValue() { this.$emit('update:value', newValue); } } } </script> ``` 父组件监听该事件并更新数据： ```vue <template> <ChildComponent :value="parentValue" @update:value="parentValue = $event" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentValue: '初始值' }; } } </script> ``` 2. **使用本地状态**：在子组件的 `data` 中定义一个本地状态变量，并将 `props` 的值复制给它，然后修改这个本地状态变量。示例如下： ```vue <template> <input v-model="localValue" /> </template> <script> export default { props: ['value'], data() { return { localValue: this.value }; } } </script> ``` 3. **使用计算属性**：通过计算属性的 `setter` 方法来修改本地状态。示例代码如下： ```vue <template> <input v-model="computedValue" /> </template> <script> export default { props: ['value'], computed: { computedValue: { get() { return this.value; }, set(newValue) { this.$emit('update:value', newValue); } } } } </script> ``` 4. **使用 `.sync` 修饰符**：在父组件中使用 `.sync` 修饰符简化数据同步过程。子组件触发更新事件： ```vue <template> <button @click="updateValue">更新值</button> </template> <script> export default { props: ['value'], methods: { updateValue() { this.$emit('update:value', newValue); } } } </script> ``` 父组件使用 `.sync` 修饰符： ```vue <template> <ChildComponent :value.sync="parentValue" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentValue: '初始值' }; } } </script> ```