VueJS 오류: 프로펠을 직접 변환하지 마십시오.

VueJS 오류: 프로펠을 직접 변환하지 마십시오.

모달 작성하려고 하는데 닫을 때만 다음 오류가 나타납니다.

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

found in

---> <PanelDesconectarModal> at resources\assets\vue\PanelDesconectarModal.vue
       <VNavigationDrawer>
         <PanelDrawer> at resources\assets\vue\PanelDrawer.vue
           <VApp>
             <PanelRoot> at resources\assets\vue\PanelRoot.vue
               <VApp>
                 <Root>

PanelDesconectarModal.표시하다

<template>
    <v-dialog v-model="value" max-width="350">
        <v-card :dark="($theme === 'dark')">
            <v-card-title class="headline">Desconectar</v-card-title>
            <v-divider></v-divider>
            <v-card-text>Você tem certeza que deseja desconectar-se?</v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn flat @click.native="closeDialog">Cancelar</v-btn>
                <v-btn :color="$color" flat="flat" @click.native="desconectar">Desconectar</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
    export default {
        name: 'panel-desconectar-modal',
        props: ['value'],
        methods: {
            closeDialog() {
                this.value = false;
            },
            desconectar() {
                this.closeDialog();

                window.location = this.$route + '/panel/desconectar';
            }
        }
    }
</script>

ProgressDesconectarModal 사용.vue, showDesconectar는 데이터 변수입니다.

<panel-desconectar-modal :value="showDesconectar"></panel-desconectar-modal>

것은 소품들이 입니다.value 안에서v-model.

.value이(가 표시됩니다.v-model가 있는 것은 「」( 「」)입니다.data「」가 붙은 값v-model 이상 data★★★★★★★★★★★★★★★★★★」

vuejs v2.3.0부터는 부모에게 값을 매겨 부모가 값을 변경한 후 자식 구성 요소에 전달하는 것이 좋습니다.

---

So all you have to do is:

v-dialog 표시

v-model ㅇㅇㅇㄹㄹㄹㄹㄹㄹㄹㄹ and and and 。:value="value" @input="$emit('input')"

기능:

closeDialog() {
    this.$emit('input');
}

»panel-desconectar-modalv-model="showDesconectar".

---

이는 다음과 같은 이유로 동작합니다.

<input v-model="something"> is syntactic sugar for:

<input   
    v-bind:value="something"
    v-on:input="something = $event.target.value">

이것은 제가 비슷한 질문에 대한 답변으로 제공한 작업 예시 펜입니다.

자녀 구성 요소의 소품을 변형하면 안 됩니다.개체만 변환할 수 있고 기본 요소는 변환할 수 없습니다.따라서 데이터 옵션 또는 계산된 속성을 사용할 수 있습니다.

data() {
  return {
    childValue: this.value; // initialize props value
  }
}

이제 '나', '나'를 수 .childValue:

closeDialog() {
   this.childValue = false;
},

사용하세요.childValue component(자녀 컴포넌트 내 것) value소품

지금이야말로 스스로에게 "내가 정말 소품이 필요한가?"라고 자문할 때입니다. 데이터로 할 수 있나요? 제가 실수로 Vue 컴포넌트에 어떤 상태를 넣었기 때문일까요?"

사용자가 페이지 및 구성요소의 작성자이고 구성요소가 페이지에 한 번만 나타나는 경우, 소품을 사용할 이유가 없습니다.구성 요소가 배열의 모든 선에 대해 반복되므로 소품이 필요한 경우 구성 요소가 저장소의 소스 배열을 직접 수정할 수 있도록 소품을 배열 색인만 만드십시오.Vue 구성 요소는 상태, 특히 공유해야 하는 상태를 포함할 수 없으며 서로 단단히 바인딩되어 있으면 안 됩니다.부모-자녀 관계는 DOM 트리에 배치될 가능성에서 발생합니다(자녀 관계는 부모의 마크업 내에서 발생합니다).이건 나이트클럽에서의 우연한 만남 같아.자녀는 부모와 다른 관계가 없을 수 있습니다.소스 데이터의 계층은 마크업과 관계없이 스토어 구조로 표현해야 합니다.가능한 경우 Vue 컴포넌트는 스토어와 긴밀한 쌍방향 관계를 유지하고 서로 많은 대화를 나누지 않아야 합니다. :-)

관련 Vue 문서에는 기본값을 사용한 예가 없기 때문에 이러한 답변은 다른 곳에서 찾을 수 있습니다.디폴트값을 가진 컴포넌트를 작성하기 위한 솔루션이 필요했지만, 초점을 잃으면 입력이 항상 이전 상태로 되돌아오거나 "프로퍼 다이렉트 뮤트 방지" 오류가 발생합니다.가변 속성 생성 및 값 설정created이벤트 덕분에 해결했습니다.

data()
{
    return {
        text: null
    };
},

props: {
    properties: Object,
    value: String
},

created()
{
    this.text = this.value;
}

언급URL : https://stackoverflow.com/questions/49315487/vuejs-error-avoid-mutating-a-prop-directly