刚开始的代码:
<template>
<div>
<el-button type="primary" @click="showMessage()">新增 +</el-button>
<el-dialog v-model="dialogVisible" title="Warning" width="30%" center>
<span>
It should be noted that the content will not be aligned in center by
default
</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">
Confirm
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
let dialogVisible=false;
const showMessage=()=>{
console.log("只有我才能行使让对话框出现的权利");
dialogVisible = true
console.log("我出现啦",dialogVisible);
}
</script>
本人用的是vue3框架,相应的用的elementplus. 在做某项目的时候需要用到点击某按钮出现对话框,在之前vue2项目中用到的v-show,v-if都能出现,但在这次开发中,始终不出现,检查了好几遍代码都觉得没问题,最后通过一位博主的博客发现,改变是否显示的参数需要定义在data里.部分代码如下:
export default{
data(){
return{
dialogVisible:false
}
},
methods:{
showMessage(){
this.dialogVisible=true
}
}
}
虽然最后解决了问题,但是还是不清楚为什么要这样.......