[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c-Toy模板网

这篇具有很好参考价值的文章主要介绍了[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

报错翻译：避免直接更改一个prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，应使用基于prop值的数据或计算属性。正在更改的prop：“activeId”
解决办法，使用基于prop的值，即把名为activeId的prop的值放在另一个变量中，对那个变量进行修改，不修改activeId。
1、实现功能
avoid mutating a prop directly since the value will be overwritten whenever,前端报错,vue.js,javascript,前端
有三个页面，共用一个顶部导航，顶部导航封装为一个组件，原始代码如下，切换时报错：
2、组件代码
activeId为传递的值，用于存放某一页导航选中的索引记录。

<template>
	<div class="headMiddle flexCenter">
		<div class="widthStyle">
			<div class="flexBetween">
				<div v-for="(item,index) in dataArray" :key="index" @click="handleChose(index)"
					:class="activeId==index?'activeItemStyle':'itemStyle'">
					<div class="jbStle"></div>
					<div class="bordStatistic">
						<div class="nameStyle">
							{{item.name}}
						</div>
					</div>
					<div class="jbStle"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "TopBar",
		components: {},
		props: {
			activeId: {
				required: true,
				type: Number
			},
		},
		data() {
			return {
				dataArray: [{
						name: '首页',
						path: 'home',

					},
					{
						name: '农机管理',
						path: 'machineList',
					},
					{
						name: '服务管理',
						path: 'serviceManage',
					},

				],
			}
		},
		computed: {

		},
		mounted() {

		},
		methods: {
			handleChose(index) {
				this.activeId = index;
				this.$router.push(this.dataArray[index].path)
			},
		}
	};
</script>
<style lang="scss" scoped>
	.headMiddle {
		position: absolute;
		top: 12% !important;
		left: 0px;
		right: 0px;
		z-index: 2;

		.widthStyle {
			width: 40%;
			min-width: 556px;
		}

		.activeItemStyle,
		.itemStyle {
			cursor: pointer;

			.jbStle {
				width: 76px;
				height: 1px;
			}

			.bordStatistic {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 76px;
				height: 32px;
				background: rgba(7, 53, 58, 0.8);

				.nameStyle {
					font-size: 13px;
					font-weight: 500;
					color: #FEFFFF;
				}
			}
		}

		.activeItemStyle {
			.jbStle {
				background-color: rgba($color: #61FFF6, $alpha: 1);
			}

			.bordStatistic {
				background: rgba(#61FFF6, 0.2);
			}

			.nameStyle {
				text-shadow: 0px 2px 1px rgba(0, 1, 1, 0.63);
			}
		}

		.itemStyle {
			.jbStle {
				background-color: rgba($color: #61FFF6, $alpha: 0.4);
			}
		}
	}
</style>

3、调用组件页面代码
该页面为农机管理，activeId等于1。

<TopBar :activeId='1'></TopBar>

avoid mutating a prop directly since the value will be overwritten whenever,前端报错,vue.js,javascript,前端

————————————————————————————————————
上述代码报错，以下是修改。
4、修改。调用组件页面不用更改，仅修改组件。声明一个新的变量activeTemp，对它进行修改。
avoid mutating a prop directly since the value will be overwritten whenever,前端报错,vue.js,javascript,前端

文章来源地址https://www.toymoban.com/news/detail-774980.html

<template>
	<div class="headMiddle flexCenter">
		<div class="widthStyle">
			<div class="flexBetween">
				<div v-for="(item,index) in dataArray" :key="index" @click="handleChose(index)"
					:class="activeTemp==index?'activeItemStyle':'itemStyle'">
					<div class="jbStle"></div>
					<div class="bordStatistic">
						<div class="nameStyle">
							{{item.name}}
						</div>
					</div>
					<div class="jbStle"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "TopBar",
		components: {},
		props: {
			activeId: {
				required: true,
				type: Number
			},
		},
		data() {
			return {
				activeTemp:this.activeId,
				dataArray: [{
						name: '首页',
						path: 'home',

					},
					{
						name: '农机管理',
						path: 'machineList',
					},
					{
						name: '服务管理',
						path: 'serviceManage',
					},
				],
			}
		},
		computed: {

		},
		mounted() {

		},
		methods: {
			handleChose(index) {
				this.activeTemp = index;
				this.$router.push(this.dataArray[index].path)
			},
		}
	};
</script>
<style lang="scss" scoped>
	.headMiddle {
		position: absolute;
		top: 12% !important;
		left: 0px;
		right: 0px;
		z-index: 2;

		.widthStyle {
			width: 40%;
			min-width: 556px;
		}

		.activeItemStyle,
		.itemStyle {
			cursor: pointer;

			.jbStle {
				width: 76px;
				height: 1px;
			}

			.bordStatistic {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 76px;
				height: 32px;
				background: rgba(7, 53, 58, 0.8);

				.nameStyle {
					font-size: 13px;
					font-weight: 500;
					color: #FEFFFF;
				}
			}
		}

		.activeItemStyle {
			.jbStle {
				background-color: rgba($color: #61FFF6, $alpha: 1);
			}

			.bordStatistic {
				background: rgba(#61FFF6, 0.2);
			}

			.nameStyle {
				text-shadow: 0px 2px 1px rgba(0, 1, 1, 0.63);
			}
		}

		.itemStyle {
			.jbStle {
				background-color: rgba($color: #61FFF6, $alpha: 0.4);
			}
		}
	}
</style>

到了这里，关于[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！