vue3 使用element-plus Dialog踩坑记录之methods用法与setup用法 Element Dialog最原始的调用1.在methods()中踩的坑2.在setup()中踩的坑

Element Dialog最原始的调用

复制过来的代码可以直接把dialog弹出来

<template> <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> <el-dialog title="收货地址" v-model="dialogFormVisible"> <template #footer> <span class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> </span> </template> </el-dialog> </template> <script> export default { data() { return { dialogFormVisible: false, } } }; </script>

框弹出来了，但是下面这句代码实在看得难受，想自己在方法中改变属性的值，结果悲剧来了

@click="dialogFormVisible = true"> 1.在methods()中踩的坑

错误的代码

<template> <div> <el-button type="text" @click="show-dialog">打开嵌套表单的 Dialog</el-button> <el-dialog title="收货地址" v-model="dialogFormVisible"> <template #footer> <span class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> </span> </template> </el-dialog> </div> </template> <script> export default { data() { return { dialogFormVisible: false }; }, method:{ show_dialog(){ this.dialogFormVisible=true; } } }; </script>

结果怎么点按钮框也出不来，浏览器也不报错，弄了好久才知道是methods写成了method，要提醒的是记得在methods中需要加this

2.在setup()中踩的坑

错误的代码

<template> <div> <el-button type="text" @click="show_dialog">打开嵌套表单的 Dialog</el-button> <el-dialog title="收货地址" v-model="dialogFormVisible"> <template #footer> <span class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> </span> </template> </el-dialog> </div> </template> <script> export default { setup() { let dialogFormVisible=false let show_dialog=()=>{ dialogFormVisible=true; } return{ show_dialog, dialogFormVisible } } }; </script>

这下错误就是基础不牢导致的，正确的代码

<template> <div> <el-button type="text" @click="show_dialog">打开嵌套表单的 Dialog</el-button> <el-dialog title="收货地址" v-model="dialogFormVisible"> <template #footer> <span class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> </span> </template> </el-dialog> </div> </template> <script> import {ref} from 'vue' export default { setup() { let dialogFormVisible=ref(false) let show_dialog=()=>{ dialogFormVisible.value=true; } return{ show_dialog, dialogFormVisible } } }; </script>

双向绑定的变量在setup中定义时要加ref，修改变量的值时要加value

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。