追梦随想
追梦随想
  • 发布:2024-03-22 15:57
  • 更新:2024-10-14 16:39
  • 阅读:391

关于uni-forms组件的bug【提交的字段['*']在数据库中并不存在】问题的复现和临时解决办法

分类:uni-app

上午搞的好好的,还添加了数据,下午再测就出现这个问题了,重新编译也不行,真是大白天见*了。。。
百度了一番,发现该问题最早出现是在2021-08-13这样就过分了啊,快三年了还没解决呢?
提示提交的字段["dirty_data"]在数据库中并不存在
然后又找了几个类似的问题贴,看到官方的回复说是一直没办法复现,所以没法解决,好吧,你们真牛
经过几个小时的不断百度和测试,终于发现规律了,复现代码如下

<template>  
    <view class="uni-container">  
        <uni-forms ref="form" v-model="formData" :rules="rules">  
            <uni-forms-item name="goods_name" label="商品名称" label-width="100px" label-align="right" required>  
                <uni-easyinput v-model="formData.goods_name" :clearable="false" placeholder="请输入商品名称" />  
            </uni-forms-item>  

            <uni-forms-item name="is_more_specs" label="是否多规格" label-width="100px" label-align="right">  
                <uni-data-checkbox v-model="formData.is_more_specs" mode="button" :localdata="[{text: '是', value: 1}, {text: '否', value: 0}]"></uni-data-checkbox>  
            </uni-forms-item>  

            <template v-if="formData.is_more_specs">  
                <uni-forms-item name="goods_sku" label="商品sku" label-width="100px" label-align="right">  
                     <uni-easyinput v-model="formData.goods_sku" :clearable="false" placeholder="请输入商品sku" />  
                </uni-forms-item>  
            </template>  

            <template v-else>  
                <uni-forms-item name="remain_stock" label="商品库存" label-width="100px" label-align="right" required>  
                    <uni-easyinput v-model="formData.remain_stock" :clearable="false" placeholder="商品库存" />  
                </uni-forms-item>  
            </template>  

            <view class="uni-button-group">  
                <button style="width: 100px;" type="primary" class="uni-button" @click="submitForm">{{$t('common.button.submit')}}</button>  
                <navigator open-type="navigateBack" style="margin-left: 15px;">  
                    <button style="width: 100px;" class="uni-button">{{$t('common.button.back')}}</button>  
                </navigator>  
            </view>  
        </uni-forms>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            formDataId: '',  
            //表单数据  
            formData: {  
                goods_id: '',  
                goods_name: '',  
                market_price: '',  
                goods_sku: '',  
                is_more_specs: 0  
            },  
            //数据验证  
            rules: {  
                goods_name: {  
                    rules: [  
                        {  
                            "required": true,  
                            "errorMessage": '请选择活动商品'  
                        }  
                    ]  
                },  
                remain_stock: {  
                    rules: [  
                        {  
                            "required": true,  
                            "errorMessage": '请输入商品库存'  
                        }, {  
                            format: 'number',  
                            errorMessage: '商品库存必须为数字'  
                        }  
                    ]  
                }  
            }  
        }  
    },  
    methods: {  
        submitForm() {  
            this.$refs.form.validate((err, res) => {  
                if (err) return false;  

                //入库  
            });  
        }  
    }  
}  
</script>  

<style lang="scss">  

</style>


问题的原因就是某个表单项设置了验证规则,但是又因为业务需要增加v-if过滤掉了该表单项,这时候bug的出现了,但实际上这个提示才是最坑的,因为根本没有到去验证数据表那一步啊。

解决办法
如果把v-else节点的template更换成view就没问题了,至于原因我不知道,没心思去分析源码。
希望官方有空把这个烂尾处理了吧。。。

0 关注 分享

要回复文章请先登录注册

y***@qq.com

y***@qq.com

回复 y***@qq.com :
给 uni-forms-item 添加了一个 key 解决了。
2024-10-14 16:39
y***@qq.com

y***@qq.com

现在依然存在
2024-10-14 16:33