대신 프로펠러 값을 기반으로 데이터 또는 계산된 속성을 사용하십시오.Vue JS

대신 프로펠러 값을 기반으로 데이터 또는 계산된 속성을 사용하십시오.Vue JS

Vue에서 "variable" 값을 변경하려고 하는데 버튼을 클릭하면 콘솔에 다음과 같은 메시지가 표시됩니다.

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

나는 이 문제를 어떻게 해결해야 할지 모르겠다.

내 파일.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이렇게 하면 값이 컴포넌트 내부로 변경되지만 부모 컴포넌트가 어떤 이유로든 재렌더해야 하는 경우 컴포넌트 내부의 값은 컴포넌트 외부의 현재 상태로 덮어씁니다.

일반적으로 내부 사용을 위해 값의 복사본을 만들어 이 문제를 처리합니다.

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)
}

언급URL : https://stackoverflow.com/questions/43959824/instead-use-a-data-or-computed-property-based-on-the-props-value-vue-js