問題描述

為什么必須需要
:class="{checked: isChecked }" 這個(gè)玩意

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

去掉就不能顯示彈框

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
父組件

<template>
    <div>
        <div class="input-agreen">
               <el-checkbox></el-checkbox>
            <label  style="color:#676767;">我已閱讀并同意<a  :class="{checked: isChecked }"  @click="checkAgree">實(shí)名認(rèn)證服務(wù)協(xié)議</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) {//關(guān)閉查看    
                done();
            }
        },
        
    }
</script>

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

這個(gè) this.isChecked 很是糾結(jié) 去掉就不能正常了 可是跟他也是沒關(guān)系的啊