el-dialog点击右上角的×关闭，会报错

最新推荐文章于 2023-07-13 11:02:04 发布

原创最新推荐文章于 2023-07-13 11:02:04 发布 · 2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#java

收录于

本文记录了在使用el-dialog组件时遇到的问题：点击右上角的×关闭对话框时出现错误提示。通过调整代码实现了解决方案，即使用自定义的关闭方法替代直接修改属性值。

el-dialog点击右上角的×关闭，会报错： 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: "show"

<div> 
    <el-dialog title="公卫人群" modal :show-close="true" 
          :close-on-click-modal="false"             
          :visible.sync="show"  //使用:visible.sync或者:value
          class="cl-dialog" width="60%" 
          :before-close="onClose">//添加了一个关闭方法
   </el-dialog>
</div>

<script>
export default {
        props: {
            show: {
                type: Boolean,
                default: false
            }
        },
        methods: {
               onClose() {
                this.$emit('close')
                    }
                }
} 
</script>

新手，学习，记录一下。