h***@163.com
h***@163.com
  • 发布:2021-01-09 10:34
  • 更新:2021-01-09 10:53
  • 阅读:2927

【报Bug】uniapp编译为微信小程序的时候 v-model 偶尔不生效

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX类型: 正式

HBuilderX版本号: 3.0.5

第三方开发者工具版本号: 最新

基础库版本号: 最新

项目创建方式: HBuilderX

示例代码:

插件代码

<template>  
    <view class="uni-column">  
        <view class="uni-row" style="font-size: 26upx;color: rgb(70 70 70);justify-content: space-between;margin-right: 25upx;">  
            <view>请选择上传的图片</view>  
            <view v-if="max > 0">{{ value.length }}/{{ max }}</view>  
            <view v-else>不限</view>  
        </view>  
        <view class="uni-row" style="flex-wrap: wrap;margin-top: 20upx;">  
            <view v-for="v in value" style="width: 213upx;height: 213upx;background-color: #CCCCCC;margin-bottom: 20upx;margin-right: 20upx;border-radius: 10upx;border: 1px solid #CCCCCC;position: relative;">  
                <image :src="v" mode="scaleToFill" style="width: 213upx;height: 213upx;"></image>  
                <view style="position: absolute;left: -10upx;top: -10upx;width: 50upx;height: 50upx;border-radius: 10upx;background-color: #FFFFFF;">  
                    <image src="/static/img/delimg.png" mode="scaleToFill" style="width: 50upx;height: 50upx;border-radius: 10upx;"></image>  
                </view>  
            </view>  

            <!-- 上传图片按钮 -->  
            <view class="uni-column" style="width: 213upx;height: 213upx;margin-bottom: 20upx;margin-right: 20upx;border-radius: 10upx;border: 1px solid #CCCCCC;justify-content: center;align-items: center;" @click="onUploadTo">  

                <image src="/static/img/upimg.png" mode="scaleToFill" style="width: 60upx;height: 60upx;"></image>  
                <view style="font-size: 28upx;color: rgb(70 70 70);margin-top: 10upx;">上传图片</view>  

            </view>  
        </view>  
    </view>  
</template>  

<script>  
    import Net from '@/libs/net.js'  
    export default {  
        model: {  
            prop: 'value',  
            event: 'change'  
        },  
        props: {  
            value: {  
                type: Array  
            },  
            max: {  
                type: Number,  
                default: -1,  
            }  
        },  
        data() {  
            return {  
                hasUpload: false,  
            }  
        },  
        methods: {  
            /**  
             * 上传图片  
             */  
            onUploadTo() {  
                let _  = this  

                if(_.hasUpload) {  
                    return  
                }  

                let sub = _.max - _.value.length  
                if(sub < 1) {  
                    uni.showToast({  
                        icon: "none",  
                        title: "已达到图片数量上限",  
                    })  
                    return  
                }  

                uni.chooseImage({  
                    count: _.max,  
                    success(r) {  

                        _.hasUpload = true  

                        // 验证图片长度并切割  
                        let files = r.tempFilePaths  
                        if(files.length > sub) {  
                            files = files.slice(0, sub)  
                        }  

                        Net.uploadCarApp({  
                            files: files,  
                            success(res) {  
                                uni.showToast({  
                                    icon: "none",  
                                    title: "成功上传 " + res.success_num + "/" + res.total + " 张",  
                                })  
                                // console.log("图片张数", _.value.concat(res.data));  
                                _.$emit('change', _.value.concat(res.data))  
                                _.hasUpload = false  
                            }  
                        })  
                    }  
                })  
            }  
        }  
    }  
</script>  

<style>  
</style>  

业务代码

<template>  
    <view class="container">      
        <CarImageInput :value="form.images" @change="onTestChange" :max="16"></CarImageInput>  
        <CarImageInput v-model="form.images" :max="16"></CarImageInput>  
        <CarImageInput v-model="form.certs" :max="6"></CarImageInput>  
    </view>  
</template>  

<script>  
import Net from '@/libs/net.js'  
import Model from '@/libs/model.js'  
import CarImageInput from '@/components/car/car-image-input.vue'  
export default {  
    components: {  
        CarImageInput,  
    },  
    data() {  
        return {  
            form: {  
                images: [],  
                certs: [],  
                license_at: '',  
                tx: '',  
                trade_type: '',  
            },  
            pickerOptions: {  
                tx: Model.getCarTxOptions(),  
                trade_type: Model.getCarTradeTypeOptions(),  
            },  
            pickerVisible: {  
                license_at: false,  
                tx: false,  
                trade_type: false,  
            },  
        };  
    },  
    methods: {  
        /**  
         * 显示选择框  
         * @param {Object} key  
         */  
        onClickShowPicker(key) {  
            let _ = this  
            _.pickerVisible[key] = true  
        },  

        onTestChange(v) {  
            uni.showToast({  
                icon: "none",  
                title: "回调图片" + v.length  
            })  
            console.log("回调数据", v);  
            this.form.images = v  
        },  

    }  
};  
</script>  

<style></style>  

操作步骤:

以上代码复现

预期结果:

以上代码复现

实际结果:

以上代码复现

bug描述:

里面有两种写法

  1. v-model 语法糖写法
    <CarImageInput v-model="form.images" :max="16"></CarImageInput>
  2. @change 语法糖转换后写法
    <CarImageInput :value="form.images" @change="onTestChange" :max="16"></CarImageInput>

编译后

  1. 编译成 H5 所有写法都生效
  2. 编译成 微信小程序 只有第二种写法生效

请问

  1. 原因在哪,感觉关于 v-model.sync 这两种语法在编译的时候总出问题,有时候编译成H5也会出现这样那样的问题
  2. 希望官方给出解答
2021-01-09 10:34 负责人:无 分享
已邀请:
h***@163.com

h***@163.com (作者) - 一个普通的程序猿

后来我找了一下资料在看到社区中有回答修改为 input 然后发现确实没问题,但是 .sync 还不清楚什么原因

model: {    
  prop: 'value',    
  event: 'input'    
},

该问题目前已经被锁定, 无法添加新回复