problem description
Why do you need
: class= "{checked: isChecked}" this thing
the environmental background of the problems and what methods you have tried
if it is removed, the pop-up box cannot be displayed
related codes
/ / Please paste the code text below (do not replace the code with pictures)
parent component
<template>
<div>
<div class="input-agreen">
<el-checkbox></el-checkbox>
<label style="color:-sharp676767;"><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 components
<template>
<div>
<el-dialog
:visible.sync="approveDialog"
center
width="40%"
:before-close="handleClose">
<div class="agreement">
<p class="title">
.
<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>
what result do you expect? What is the error message actually seen?
this this.isChecked can"t be normal if you remove it, but it has nothing to do with him.