iview vue 点击右上角的×关闭报错 Prop being mutated

Question

iview modal组件拆出去后，点击右上角的×关闭，会报错 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>

Answer 1

不知道楼主解决问题了没，改下子组件 Modal 组件的用法即可。

子组件            
<template>
<div>
    <Row>
        <Col>
            <Modal
                    // 这里 v-model 改为 :value 即可
                    :value="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>

---

如有帮助，麻烦点击下采纳，谢谢~

Answer 2

通过props传进组件的值，一般不能在组件内部修改，常用的方法有两种：1，在data里另外定义一个值，他的默认值是props内的值，组件内部直接修改data内的这个；2.通过emit或者其他方法，让父组件修改值来影响组件内的这一个值.
但是 也可以忽略这个错误，对应的操作还是会正常执行.

Answer 3

# 2个方法

第一个 ：

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

// 子组件
<el-dialog
      :visible.sync="visible"
      title="申请"
      :before-close="onClose"
>

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

第二个 ：

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

// 子组件
<el-dialog
      :visible.sync="visible"
      title="申请"
      :before-close="onClose"
>

onClose() {
  this.$emit('close')
}

---

这2个方法 ， :before-close 是关键 ；

Answer 4

<Modal

                    :value="faultModalStatus"
                    title="故障呼叫详情"
                    @on-visible-change="getFaultModalStatusChange"
                    :mask-closable="false"
            >
                <Form :label-width="100">
                    <Row>
                        <Col>
                            <FormItem label="保修单号：" class="formItemMargin">
                                <Input @on-enter="getModalOrderEvent" v-model="modalOrder" type="text" placeholder="自动生成报修单号" class="faultModalInputLength"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <FormItem label="设备名称：" class="formItemMargin">
                                <Input v-model="modalEeqName" type="text" placeholder="请输入" class="faultModalInputLength"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <!--<Row>
                        <Col>
                            <FormItem label="车间：" class="formItemMargin">
                                <Input readonly v-model="modalWorkshop" type="text" placeholder="请输入" class="faultModalInputLength"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <FormItem label="工序：" class="formItemMargin">
                                <Input readonly v-model="modalProcess" type="text" placeholder="请输入" class="faultModalInputLength"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <FormItem label="设备维修人员：" prop="searchRepairEvent" class="formItemMargin">
                                <Select
                                        class="faultModalInputLength"
                                        v-model="modalRepairPerson"
                                        filterable
                                        remote
                                        :remote-method="searchRepairEvent"
                                        :loading="searchRepairLoading">
                                    <Option v-for="(option, index) in modalRepairPersonList" :value="option.value" :key="index">{{option.label}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <FormItem label="故障类型：" class="formItemMargin">
                                <Select v-model="modalFaultClassify" class="faultModalInputLength" @on-change="getSelectFaultTypeEvent">
                                    <Option v-for="item in modalFaultClassifyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <FormItem label="故障内容描述：" class="formItemMargin">
                                <Input v-model="modalDescribe" type="textarea" :rows="3" placeholder="请输入" class="faultModalInputLength"/>
                            </FormItem>
                        </Col>
                    </Row>-->
                </Form>
                <div slot="footer">
                    <div>
                        <Button :loading="buttonLoading" type="success" @click="faultConfirmEvent">确认</Button>
                        <Button class="cancelButton" @click="faultCancelEvent">取消</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;
        },