element ui 使用dialog关闭报错

问题描述：

在打开了dialog后，点击右上角自带的关闭按钮后，对话框虽然可以关闭，但是浏览器的控制台上报错：

源码如下：

<el-dialog title="新增评价组" :close-on-click-modal="false" :visible.sync="this.showCreateGroupDialog" width="50%">

data() {
   return {
              evaGroups: [],
              searchEvaGroupName: '',
              showCreateGroupDialog: false,
              newEvaGroup: {
         name: '',
         description: '',
         remark: '',
      }
   }
}

修改方案：

去掉 :visible.sync="this.showCreateGroupDialog" 中的this即可，但是不知道原理是什么，希望有大神能够帮助回答，非常感谢~~

PS：自带的关闭按钮会自动更改用于控制显示的变量，无须再自己定义关闭回调函数了关闭了。