问题描述
好吧,我正在尝试更改 Vue 中变量"的值,但是当我单击按钮时,它们会在控制台中抛出一条消息:
Well, I'm trying to change a value of "variable" in Vue, but when I click on the button they throw a message in console:
[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: "menuOpen"
我不知道如何解决这个问题...
I have no idea how to solve this problem...
我的文件.vue:
<template>
<button v-on:click="changeValue()">ALTERAR</button>
</template>
<script>
export default {
name: 'layout',
props: [ 'menuOpen' ],
methods: {
changeValue: function () {
this.menuOpen = !this.menuOpen
}
},
}
</script>
谁能帮帮我?谢谢
推荐答案
警告很清楚.在您的 changeValue
方法中,您正在更改属性的值,menuOpen
.这将更改组件内部的值,但是如果 父 组件因任何原因必须重新渲染,那么无论内部 组件的值是什么,组件都将被覆盖组件外部的当前状态.
The warning is pretty clear. In your changeValue
method you are changing the value of the property, menuOpen
. This will change the value internally to the component, but if the parent component has to re-render for any reason, then whatever the value is inside the component will be overwritten with the current state outside the component.
通常情况下,您通过复制值供内部使用来处理此问题.
Typically you handle this by making a copy of the value for internal use.
export default {
name: 'layout',
props: [ 'menuOpen' ],
data(){
return {
isOpen: this.menuOpen
}
},
methods: {
changeValue: function () {
this.isOpen= !this.isOpen
}
},
}
如果您需要将值的更改传达回父级,那么您应该$emit
更改.
If you need to communicate the change of the value back to the parent, then you should $emit
the change.
changeValue: function () {
this.isOpen= !this.isOpen
this.$emit('menu-open', this.isOpen)
}
这篇关于相反,根据道具的值使用数据或计算属性.VueJS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!