vue中自己一个dialog组件的显示问题

Question

问题描述

为什么必须需要
:class="{checked: isChecked }" 这个玩意

问题出现的环境背景及自己尝试过哪些方法

去掉就不能显示弹框

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
父组件

<template>
    <div>
        <div class="input-agreen">
               <el-checkbox></el-checkbox>
            <label  style="color:#676767;">我已阅读并同意<a  :class="{checked: isChecked }"  @click="checkAgree">实名认证服务协议</a>的条款</label>
        </div>
        <approve-dialog :approveDialog="approveDialog"></approve-dialog>
    </div>
</template>
<script>
import ApproveDialog from '../../components/dialog';
    export default {
        data(){
            return {
                isChecked : true,
                approveDialog:false
            }
        },
        components:{
            ApproveDialog
        },
        methods:{
            checkAgree:function(){
                this.isChecked = !this.isChecked;
                this.approveDialog =true
            }
        }
    }
</script>
<style>
    label a {
        color: blue;
    }
</style>

dialog组件

<template>
    <div>
        <el-dialog
            :visible.sync="approveDialog"
            center
            width="40%"
            :before-close="handleClose">
            <div class="agreement"> 
            <p class="title">啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            <p>一.问题</p>
            <ul>  
            <li>这是为啥子</li>
            </ul>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="approveDialog = false" class="bg_btn">我知道了</el-button>
            </span>
        </el-dialog>
    </div>
</template> 
<script>
    export default {
        data(){
            return {
                approveDialog : true
            }
        },
        props:['approveDialog'],
        methods:{
            handleClose(done) {//关闭查看    
                done();
            }
        },
        
    }
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

这个 this.isChecked 很是纠结 去掉就不能正常了 可是跟他也是没关系的啊

Answer 1

不用纠结能实现功能就好了，先用，等后面用多了你更了解了，然后回过头来，就会恍然大悟，原来是这样的

Answer 2

:class="{checked: isChecked }"

这个意思是如果用户选中了，则给a加上checked这个类，表示已经选中

Answer 3

this.isChecked会不会是el-checkbox所需要的，去掉这里el-checkbox出问题，导致弹窗出不来。你换个点击事件，比如一个button试试。