vue3中setup用法与methods用法踩坑

m0_67393157

于 2022-03-02 00:05:23 发布

阅读量3.3k

点赞数 3

分类专栏：前端 html 文章标签： echarts vue.js javascript

本文链接：https://blog.youkuaiyun.com/m0_67393157/article/details/123219594

版权

本文记录了在 Vue3 中使用 element-plus Dialog 的经历，包括在 methods 和 setup 中遇到的问题。在 methods 中由于拼写错误 'methods' 写成了 'method' 导致 Dialog 无法正常显示。而在 setup 中，由于对 Vue3 双向绑定的理解不足，初次尝试未在变量前加 ref，导致无法正确修改变量值。修正后的代码为在 setup 中定义变量时使用 ref，并在修改时使用 .value。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
&l

最低0.47元/天解锁文章