vue3中setup用法与methods用法踩坑
vue3 使用element-plus Dialog踩坑记录之methods用法与setup用法Element Dialog最原始的调用1.在methods()中踩的坑2.在setup()中踩的坑Element Dialog最原始的调用复制过来的代码可以直接把dialog弹出来<template><el-button type="text" @click="dialogFormV
·
vue3 使用element-plus Dialog踩坑记录之methods用法与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条内容
所有评论(0)