vue中click事件失效

如图,显示我的handleAdd方法没被定义,点击新增按钮没有对话框弹出来,如果是在我设置的对象中DialogVisible:true,则启动项目自动展示,idea提示我是我的click方法失效,我是按照官方的方法写的,但是我的click事件怎么会失效呢?

img


我的handleAdd方法是点击这个事件进行对话框的展示,对话框相关代码如下:

  <el-dialog
              v-model="dialogVisible"
              title="Tips"
              width="30%"
          >
            <el-form :model="form" label-width="120px">
              <el-form-item label="用户名">
                <el-input v-model="form.username" />
              el-form-item>
            el-form>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancelel-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        el-button>
      span>
            template>
          el-dialog>

data() {
    return {
      form:{},
      dialogVisible: false,
     }
methods:{
        handleAdd() {
          this.dialogVisible=true;
          console("111111111111","---------")
        },

按钮上的点击事件 为啥不用@click

明显拼错了

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^