小程序用vue编写，保存表单出错

Question

点击编辑，获取到已经有的地址，触发handleEdit方法后，再点击提交，进行save，发现系统报错，提示系统异常，请问下面代码哪里出错了 ，下边是代码

<template>
    <view style="padding: 20rpx;">
        <view class="box" style="margin-bottom: 10rpx;">
            <uni-forms :modelValue="form" :rules="rules" ref="formRef" label-width="160rpx" label-align="right" validateTrigger="blur">
                <uni-forms-item label="地址" name="address" required>
                    <uni-easyinput type="text" v-model="form.address" placeholder="请输入地址" />
                </uni-forms-item>
                <uni-forms-item label="门牌号" name="doorNo" required>
                    <uni-easyinput type="text" v-model="form.doorNo" placeholder="请输入门牌号" />
                </uni-forms-item>
                <uni-forms-item label="联系人" name="userName" required>
                    <uni-easyinput type="text" v-model="form.userName" placeholder="请输入联系人" />
                </uni-forms-item>
                <uni-forms-item label="联系电话" name="phone" required>
                    <uni-easyinput type="text" v-model="form.phone" placeholder="请输入联系电话" />
                </uni-forms-item>
                <view>
                    <button type="primary" class="my-button-primary" @click="save">保存并使用</button>
                </view>
            </uni-forms>
        </view>
        
        <view class="box" v-if="addressList.length">
            <view v-for="item in addressList" :key="item.id">
                <view style="padding: 10rpx 0; border-bottom: 1px solid #eee;" @click="selectAddress(item)">
                    <view style="font-weight: bold; font-size: 32rpx; margin-bottom: 10rpx;">{{ item.address + item.doorNo }}</view>
                    <view style="color: #888; margin-bottom: 10rpx;">
                        <text style="margin-right: 20rpx;">{{ item.userName }}</text>
                        <text>{{ item.phone }}</text>
                    </view>
                    <view style="text-align: right;">
                        <uni-icons type="compose" size="18" color="#888" style="margin-right: 10rpx;" @click.native.stop="handleEdit(item)"></uni-icons>
                        <uni-icons type="trash" size="18" color="#888" @click.native.stop="del(item.id)"></uni-icons>
                    </view>
                </view>
            </view>
        </view>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                user: uni.getStorageSync('xm-user'),
                addressList: [],
                form: {},
                rules: {
                    address: {
                        rules: [{
                            required: true,
                            errorMessage: '请填写地址',
                        }]
                    },
                    doorNo: {
                        rules: [{
                            required: true,
                            errorMessage: '请填写门牌号',
                        }]
                    },
                    userName: {
                        rules: [{
                            required: true,
                            errorMessage: '请填写联系人',
                        }]
                    },
                    phone: {
                        rules: [{
                            required: true,
                            errorMessage: '请填写联系电话',
                        }]
                    }
                },
                addressType: '' 
            }
        },
        onLoad(option) {
            this.addressType = option.addressType  // 地址类型
            
            this.load()
        },
        methods: {
            selectAddress(address) {
                let orderStore = uni.getStorageSync('orderStore') || {}  // 先获取缓存的数据
                if (this.addressType === '取货') {
                    orderStore.pickAddress = address
                } else {
                    orderStore.recieveAddress = address
                }
                uni.setStorageSync('orderStore', orderStore)   // 再设置缓存的地址信息
                uni.redirectTo({
                    url: '/pages/preOrder/preOrder'
                })
            },
            del(id) {
                this.$request.del('/address/delete/' + id).then(res => {
                    if (res.code === '200') {
                        uni.showToast({
                            icon: 'success',
                            title: '操作成功'
                        })
                        this.load()
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: res.msg
                        })
                    }
                }) 
            },
            handleEdit(address) {
                this.form = JSON.parse(JSON.stringify(address))
            },
            save() {
                this.$refs.formRef.validate().then(res => {
                    this.form.userId = this.user.id
                    this.$request.post('/address/add', this.form).then(res => {
                        if (res.code === '200') {
                            uni.showToast({
                                icon: 'success',
                                title: '操作成功'
                            })
        
                            if (this.addressType) {
                                this.selectAddress(res.data)  // 设置地址信息到缓存
                            }
                            
                            this.form = {}
                            this.load()
                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: res.msg
                            })
                        }
                    })
                }).catch(error => {
                    console.error(error)
                })
            },
            load() {
                this.$request.get('/address/selectAll', { userId: this.user.id }).then(res => {
                    this.addressList = res.data || []
                })
            }
        }
    }
</script>

<style>

</style>

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

根据提供的代码，可以看到以下几个可能导致保存表单出错的地方：

1. save方法未定义：在代码中找不到save方法的定义，如果没有定义该方法，那么点击保存按钮时将无法触发对应的保存操作。

2. 表单验证未通过：在保存方法中没有看到对表单进行验证的逻辑。如果在保存方法中没有对表单进行验证，那么即使点击保存按钮也不会触发保存操作。需要通过调用this.$refs.formRef.validate()方法对表单进行验证并处理验证结果。

修正方法：

methods: {
  save() {
    // 进行表单验证
    this.$refs.formRef.validate().then(() => {
      // 表单验证通过后，执行保存操作
      // ...
    }).catch(() => {
      // 表单验证不通过，处理验证失败的逻辑
      // ...
    });
  },
  // ...
}

请将以上修改后的代码添加到原有代码中进行尝试。如果仍然有问题，请提供报错信息以及更多相关代码以便进一步排查。