[Vue warn] :상위 구성 요소가 다시 렌더링될 때마다 값이 덮어쓰기되므로 프로펠을 직접 변환하지 마십시오.

[Vue warn] :상위 구성 요소가 다시 렌더링될 때마다 값이 덮어쓰기되므로 프로펠을 직접 변환하지 마십시오.

Vuej를 배우고 있는데 정답을 못 찾겠어요.연령 편집 버튼을 클릭하거나 이름 변경 버튼을 클릭하면 아래 오류가 나타납니다.

[Vue warn] :상위 구성 요소가 다시 렌더링될 때마다 값이 덮어쓰기되므로 프로포트를 직접 변환하지 마십시오.대신 프로펠러 값을 기반으로 데이터 또는 계산된 속성을 사용하십시오.변환되는 프로펠러: "myName"

[Vue warn] :상위 구성 요소가 다시 렌더링될 때마다 값이 덮어쓰기되므로 프로포트를 직접 변환하지 마십시오.대신 프로펠러 값을 기반으로 데이터 또는 계산된 속성을 사용하십시오.변환되는 프로펠러: "사용자 연령"

코드는 여기 있습니다.

https://codesandbox.io/s/k2197nr4o3

이 코드의 문제점을 알려주세요.

소품 속성을 직접 변경하려는 것이 분명합니다.

예를 들어 다음과 같습니다.

props: { name: 'something' }
methods: { 
 change_name(new_name) {
   this.name = new_name
 }
}

이는 권장되지 않으며 반응성 결여로 이어질 수 있습니다.

해결책으로 부모 자녀 통신을 사용할 수 있습니다.따라서 프로펠러를 변경하고 싶을 때는 항상 이벤트를 부모 컴포넌트로 전송하기만 하면 됩니다.위의 예는 다음과 같습니다.

props: { name: 'something' }
methods: { 
 change_name(new_name) {
   this.$emit('name-updated', new_name)
 }
}

상위 컴포넌트에서 해당 이벤트를 듣고 전달 중인 프로펠을 변경합니다.

<child-component :name="name" @name-updated="name = $event" />

또는 내가 가장 좋아하는 방법은 .sync 수식자를 사용하는 것이다.따라서 부모 컴포넌트는 다음과 같습니다.

<child-component :name.sync="name" />

및 하위 구성요소의 방법:

 change_name(new_name) {
   this.$emit('update:name', new_name)
 }

구성 요소에 부모-자녀 관계가 없는 경우 Vue.js 이벤트 버스 또는 Vuex를 확인합니다.

대신 계산된 값을 사용하십시오.예를 들어 UserEdit을 사용합니다.vue:

템플릿:

<p>User Age: {{ computedUserAge }}</p>

스크립트:

methods: {
    editAge() {
        this.computedUserAge = 30;
    }
},
computed: {
    computedUserAge: {
      get() {
        return this.userAge;
      },
      set(v) {
        this.$emit("ageWasEdited", v);
      }
    }
}

언급URL : https://stackoverflow.com/questions/53061723/vue-warn-avoid-mutating-a-prop-directly-since-the-value-will-be-overwritten-w