Iview vue clicks the * close error report Prop being mutated in the upper right corner

after the iview modal component is removed, click * close in the upper right corner to report an error 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: "faultModalStatus"


 <fault-modal
        :faultModalStatus="faultModalStatus"
        @faultConfirmEvent="faultConfirmEvent"
        @faultCancelEvent="faultCancelEvent"
        @getFaultModalStatusChange="getFaultModalStatusChange"
    >

</fault-modal>
methods:{
    //
    getFaultModalStatusChange(e){
        console.log(e)
        if(e === false){
            this.faultModalStatus = false;
        };
    },
    //
    faultClickEvent(){
        this.faultModalStatus = true;
    },
    //
    faultConfirmEvent(){
        this.faultModalStatus = false;
    },
    faultCancelEvent(){
        this.faultModalStatus = false;
    }
},
            
<template>
<div>
    <Row>
        <Col>
            <Modal
                    v-model="faultModalStatus"
                    title=""
                    @on-visible-change="getFaultModalStatusChange"
            >
                <div slot="footer">
                    <div>
                        <Button :loading="buttonLoading" type="success" @click="faultConfirmEvent"></Button>
                        <Button class="cancelButton" @click="faultCancelEvent"></Button>
                    </div>
                </div>
            </Modal>
        </Col>
    </Row>
</div>

< / template >

< script >

export default {
    props:{
        buttonLoading:{
            type:Boolean,
            default:false
        },
        faultModalStatus:{
            type:Boolean,
            default:false
        },
        modalEeqName:{
            type:String,
        },
        modalWorkshop:{
            type:String,
        },
        modalProcess:{
            type:String,
        },
        modalRepairPerson:{
            type:String,
        },
        modalFaultClassify:{
            type:String,
        },
        modalDescribe:{
            type:String,
        },
        modalRepairPersonList:{
            type:Array
        },
        modalFaultClassifyList:{
            type:Array
        }

    },
    data(){
        return {
            // faultModalStatus:false
            currentIndex:this.faultModalStatus
        }
    },
    methods:{
        //
        faultConfirmEvent(){
            this.$emit("faultConfirmEvent");
        },
        faultCancelEvent(){
            this.$emit("faultConfirmEvent");
        },
        getFaultModalStatusChange(e){
            this.$emit("getFaultModalStatusChange",e);
        }
    }
}

< / script >

< style >

< / style >

Sep.16,2021

the value passed into the component through props cannot be modified within the component. There are two common methods: 1. Define another value in data, whose default value is the value in props, and modify this value in data directly inside the component. 2. Through emit or other methods, let the parent component modify the value to affect this value within the component.
but you can also ignore this error, and the corresponding operation will still be performed normally.


< H2 >-sharp 2 methods < / H2 >

first:

// 
<dialog-apply :visible.sync="dialogApplyVisible" />

// 
<el-dialog
      :visible.sync="visible"
      title=""
      :before-close="onClose"
>

onClose() {
  this.$emit('update:visible', false)
}

second:

// 
<dialog-apply :visible.sync="dialogApplyVisible" @close='dialogApplyVisible = false' />

// 
<el-dialog
      :visible.sync="visible"
      title=""
      :before-close="onClose"
>

onClose() {
  this.$emit('close')
}
< hr >

these two methods, : before-close is the key;


I don't know if the landlord has solved the problem, just change the usage of the sub-component Modal component.

</Button>
                    </div>
                </div>
            </Modal>
            
             props:{
        modalOrder:{
            type:String,
            default:''
        },
       }
       
       getModalOrderEvent(){
            this.$emit('getModalOrderEvent',this.modalOrd)
        },
        
        
        <fault-modal
                    :modalOrder="modalOrder"
                    @getModalOrderEvent="getModalOrderEvent"
       
            >

            </fault-modal>
            
            getModalOrderEvent(e){
                console.log('',e)
            this.modalOrder = e;
        },
        
        
Menu