Vue warn]: Property or method "cancelAddAddress" is not defined?

Question

<template>
  <div>
    <span class="addressTitle">收货地址</span>
    <el-button type="primary" class="addNew" @click="addNew">新增收货地址</el-button>
    <div class="card">
        <el-card class="box-card" v-for="item of addressList">
            <div slot="header" class="clearfix">
                <span>常用地址{{item.id}}</span>
                <el-button style="float: right; padding: 3px 0" type="text">编辑</el-button>
                <el-button style="float: right; padding: 3px 0" type="text">确认</el-button>
            </div>
            <div class="text item">
                {{item.name}},  {{item.tel}}
                <br>
                {{item.address}}
            </div>
        </el-card>
    </div>
    <el-dialog
          :visible.sync="dialogFormVisible"
          :before-close="cancelAddaddress"
          title="新增收货地址"
          width="450px"
        >
            <el-form :model="addeidtAddress" :rules="rules" ref="addeidtAddress" :label-position="labelPosition" label-width="80px" :inline="true">
                <el-form-item label="姓  名" prop="name">
                    <el-input v-model="addeidtAddress.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="tel">
                    <el-input v-model="addeidtAddress.tel"></el-input>
                </el-form-item>
                <el-form-item label="收货地址" prop="address">
                    <el-input v-model="addeidtAddress.address"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAddAddress">取 消</el-button>
                <el-button type="primary" @click="sureAddAddress">确 定</el-button>
            </div>
        </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    var checkTel = (rule, value, callback) => {
        if (!value) {
        return callback(new Error('手机号不能为空'));
        } else {
            const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
            if (reg.test(value)) {
                callback();
            } else {
                return callback(new Error('请输入正确的手机号'));
            }
        }
    }
    return {
      dialogFormVisible: false,
      labelPosition: 'right',
      addressList: [{
        id: '1',
        name: '张三',
        tel: '13012345678',
        address: '北京市东城区工体东路'
      },{
        id: '2',
        name: '大宝',
        tel: '13212345678',
        address: '浙江省绍兴市新昌县杭州西湖'
      }],
      addeidtAddress: {
          name: '',
          tel: '',
          address: ''
      },
       rules: {
            name: [
                { required: true, message: '请输入收货人姓名', trigger: 'blur' },
                { max: 10, message: '长度在 10个字符之内', trigger: 'blur' }
            ],
            tel: [
                { required: true, message: '请输入联系电话', trigger: 'blur' },
                { validator: checkTel, trigger: 'blur'},
            ],
            address: [
                { required: true, message: '请输入收货地址', trigger: 'blur' }
            ]
        }
    }
  },
  methods: {
      addNew () {
          this.dialogFormVisible = true
      },
      cancelAddaddress () {
        this.dialogFormVisible = false
      },
      sureAddAddress () {
        this.dialogFormVisible = false
      }
  }
}
</script>

哪里错了？实在不知道

Answer 1

 <div slot="footer" class="dialog-footer">
    <el-button @click="cancelAddAddress">取 消</el-button>
    <el-button type="primary" @click="sureAddAddress">确 定</el-button>
</div>

与

cancelAddaddress () {
    this.dialogFormVisible = false
}

address和Address

手动滑稽...