代わりに、小道具の値に基づいてデータまたは計算されたプロパティを使用します。 VueのJS

Question

まあ、私は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 being mutated: "menuOpen" 

私はこれを解決する方法が分かりません問題...

マイfile.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> 

いずれかが私を助けることができますか？ありがとう

Answer 1

警告はかなり明確です。 changeValueメソッドでは、プロパティ値menuOpenを変更しています。これによりコンポーネントの内部で値が変更されますが、何らかの理由で親のコンポーネントを再レンダリングする必要がある場合は、の中にのコンポーネントがあります。以外のコンポーネントがコンポーネントに上書きされます。

通常、内部使用する値のコピーを作成することでこれを処理します。あなたが戻って親への値の変化を通信する必要がある場合は

export default { 
    name: 'layout', 
    props: [ 'menuOpen' ], 
    data(){ 
     return { 
      isOpen: this.menuOpen 
     } 
    }, 
    methods: { 
    changeValue: function() { 
     this.isOpen= !this.isOpen 
    } 
    }, 
} 

、あなたは変更を$emit必要があります。

changeValue: function() { 
    this.isOpen= !this.isOpen 
    this.$emit('menu-open', this.isOpen) 
}