vue中click事件失效

Question

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

我的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">Cancel</el-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","---------")
        },

Answer 1

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