在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue中自己一個(gè)dialog組件的顯示問題

vue中自己一個(gè)dialog組件的顯示問題

問題描述

為什么必須需要
: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)系的啊

回答
編輯回答
苦妄

this.isChecked會(huì)不會(huì)是el-checkbox所需要的,去掉這里el-checkbox出問題,導(dǎo)致彈窗出不來。你換個(gè)點(diǎn)擊事件,比如一個(gè)button試試。

2018年9月18日 09:35
編輯回答
念舊

不用糾結(jié)能實(shí)現(xiàn)功能就好了,先用,等后面用多了你更了解了,然后回過頭來,就會(huì)恍然大悟,原來是這樣的

2018年2月1日 19:36
編輯回答
孤客
:class="{checked: isChecked }"

這個(gè)意思是如果用戶選中了,則給a加上checked這個(gè)類,表示已經(jīng)選中

2018年9月11日 17:33