z***@126.com
z***@126.com
  • 发布:2021-12-05 10:08
  • 更新:2021-12-05 10:57
  • 阅读:433

【报Bug】3.3.0 的textarea v-model 监听不到值的变化,当组件中有input的时候,在textarea中输入 这个input也会出来对应的值,非常诡异

分类:uni-app

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

PC开发环境操作系统: Mac

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

HBuilderX类型: Alpha

HBuilderX版本号: 3.3.0

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

基础库版本号: 最新

项目创建方式: HBuilderX

示例代码:
<step :nums="item.nums" @numsBack='numsBack($event,item)'></step>  
function numsBack(e,item){  
                item.nums = e  
                checkTotalPrice()  
            }  

这里是监听step组件中input数值的

<textarea auto-height :disable-default-padding="true" class="font-28 cor_gray textarea_hei" v-model="form.address" placeholder="请填写收货地址" />

这个textarea v-model的值产生变化的时候,组件中input就收到影响,还有这个textarea的值没办法监听到,提交的时候 输入了,还是会提示收货地址为空。
回退到上一个版本,没有问题

操作步骤:

附件中有完整代码,找到首页。中为你推荐 赛事。活动资讯。。。那一栏。右滑到。甄选商品,点击一个商品。 加入购物车,随后进入购物车 选择商品。 点击结算。 输入收货地址即可复现截图中的错误,以上的问题只在真机中体现,模拟器没有问题

预期结果:

如模拟器体现

实际结果:

完全错乱

bug描述:

textarea v-model 监听不到值的变化,当组件中有input的时候,在textarea中输入 这个input也会出来对应的值

2021-12-05 10:08 负责人:无 分享
已邀请:
z***@126.com

z***@126.com (作者) - 没有

问题只在真机中展现,模拟器没有问题,非常诡异,这个问题没有尝试重新写一个简单示例,请运行附件的压缩包代码,我这边是上传体验版到小程序,用体验版看的,可以尝试更改一个appid ,用真机预览的方式复现问题

z***@126.com

z***@126.com (作者) - 没有

回退上一个版本,问题就解决了

z***@126.com

z***@126.com (作者) - 没有

截图中的那一堆console 结果,并不是由于代码中有对应console代码,什么调试代码都没有,就会是这样的表现,在上一个版本开发的时候没有任何问题,升级后,真机完全乱掉,回退到上一个版本又恢复正常

z***@126.com

z***@126.com (作者) - 没有

乱码的问题,通过监听弹窗的方式,可以控制,但是。这个textarea 中 v-model的值 提交的时候。console。发现。监听的。from.address 一直为空,所以会提示。 收货地址不能为空

z***@126.com

z***@126.com (作者) - 没有

<template>  
    <view class="safe-area-inset-bottom">  
        <nodata v-if="new_list.length===0" title="购物车没有数据"></nodata>  
        <view class="fdrow bg_white align_center u-p-l-30 u-p-r-30 u-p-t-40 u-m-t-30 u-p-b-40 borderRadius" v-for="(item,index) in new_list" :key="index">  
            <view class="u-m-r-10">  
                <radiocircle :isChoosed="item.isChoosed" @callBack="callBack($event,item)"></radiocircle>  
            </view>  
            <view class="fdrow flex" @tap.stop = "tolink('/pages/goods/detail?id='+item.id)">  
                <image :src="item.goods_pic" class="u-m-r-25 goods_pic" mode="aspectFill"></image>  
                <view class="list-column align_flex_start flex">  
                    <text class="font-28 bold">{{item.goods_name}}</text>  
                    <view class="fdrow align_center u-m-t-25">  
                        <text class="font-26 cor_active u-m-r-5 bold">¥</text><text class="font-42 cor_active bold">{{item.goods_price}}</text>  
                    </view>  
                    <view class="fdrow spaceBetween flex-full-width u-m-t-25">  
                        <text></text>  
                        <step :nums="item.nums" @numsBack='numsBack($event,item)'></step>  
                    </view>  
                </view>  
            </view>  
        </view>  
        <view class="fixedBtns" v-if="new_list.length">  
            <view class="fdrow spaceBetween u-m-b-20">  
                <view class="btn_class_txt fdrow align_center">  
                    <radiocircle :isChoosed="isChoosed" @callBack="callBackAll($event)"></radiocircle><text class="font-28 u-m-l-15">全选</text><text class="font-25 u-m-l-25 cor_gray">合计:</text><view class="fdrow align_center"><text class="font-24 cor_active u-m-r-5">¥</text><text class="font-40 cor_active">{{total_price}}</text></view>  
                </view>  
                <view @tap="showModal()">  
                    <normal-btn :isGreen="true" title="结算"></normal-btn>  
                </view>  
            </view>  
            <view class="safe-area-inset-bottom list-column"></view>  
        </view>  

        <modal :show="show" :closeIcon="true" @close="closeModal">  
            <view v-if="orderId==''">  
                <view class="fdrow spaceBetween align_center u-p-t-10 u-p-b-10">  
                    <text class="font-35 bold">收件人</text>  
                    <input class="font-28 cor_gray flex text-right" type="text" placeholder="请填写收件人姓名" v-model="form.name">  
                </view>  
                <view class="list-column align_flex_start u-p-t-10 u-p-b-10">  
                    <text class="font-35 bold">收货地址</text>  
                    <view class="u-m-t-20">  
                        <textarea auto-height :disable-default-padding="true" class="font-28 cor_gray textarea_hei" v-model="form.address" placeholder="请填写收货地址" />  
                    </view>  
                </view>  
                <view class="fdrow spaceBetween align_center u-p-t-10 u-p-b-10">  
                    <text class="font-35 bold">联系方式</text>  
                    <input class="font-28 cor_gray flex text-right" type="number" placeholder="请填写联系方式" v-model="form.mobile">  
                </view>  
                <view class="list-column u-m-t-30" @tap="submitOrder()">  
                    <normal-btn :isGreen="true" title="立即下单" />  
                    <!-- <button open-type="contact">  
                        <normal-btn title="联系客服下单" />  
                    </button> -->  
                </view>  
            </view>  
            <view v-else>  
                <view class="fdrow spaceBetween align_center u-p-t-10 u-p-b-10">  
                    <text class="font-35 bold">订单号</text>  
                    <text class="font-28 cor_gray">{{orderId}}</text>  
                </view>  
                <view class="fdrow spaceBetween align_center u-p-t-10 u-p-b-10">  
                    <text class="font-35 bold">收件人</text>  
                    <span class="font-28 cor_gray flex text-right">{{form.name}}</span>  
                </view>  
                <view class="list-column align_flex_start u-p-t-10 u-p-b-10">  
                    <text class="font-35 bold">收货地址</text>  
                    <view class="u-m-t-20">  
                        <span class="font-28 cor_gray">{{form.address}}</span>  
                    </view>  
                </view>  
                <view class="fdrow spaceBetween align_center u-p-t-10 u-p-b-10">  
                    <text class="font-35 bold">联系方式</text>  
                    <span class="font-28 cor_gray flex text-right">{{form.mobile}}</span>  
                </view>  
                <view class="fdrow spaceBetween u-p-l-60 u-p-r-60 u-m-t-30">  
                    <button open-type="contact">  
                        <normal-btn title="联系客服下单" />  
                    </button>  
                    <view @tap="tolink('/pages/orders/list')">  
                        <normal-btn :isGreen="true" title="订单列表" />  
                    </view>  
                </view>  
            </view>  
        </modal>  
    </view>  
</template>  

<script>  
    import step from '@/components/step.vue'  
    import normalBtn from '@/components/normalBtn.vue'  
    import modal from '@/components/modal.vue'  
    import nodata from '@/components/nodata.vue'  
    import radiocircle from '@/components/riadioBtn.vue'  
    import { reactive,getCurrentInstance,toRefs,onMounted,watch,computed } from 'vue'  
    import validator from '../../utils/validator.js'  
    export default{  
        setup(){  
            const data = reactive({  
                lists:[],  
                new_list:[],  
                choosed_arr:[],  
                choosed_val:[],  
                total_price:0,  
                isChoosed:false,  
                orderId:'',  
                show:false,  
                form:{  
                    name:'',  
                    address:'',  
                    mobile:''  
                },  
                rule:[  
                    {  
                        name:{  
                            value:'require',  
                            name:'收货人'  
                        },  
                        address:{  
                            value:'require',  
                            name:'收货地址'  
                        },  
                        mobile:{  
                            value:'require|mobile',  
                            name:'手机号'  
                        }  
                    }  
                ],  
            })  
            const {ctx,proxy} = getCurrentInstance()  
            onMounted(()=>{  
                //getCartList()  
                data.new_list = [  
                    {  
                        brandid: 3,  
                        cart_id: 2,  
                        certification: "",  
                        cid: 4,  
                        create_time: 1630310160,  
                        goods_meterial: "18K金",  
                        goods_name: "绿松石蝴蝶胸针",  
                        goods_pic: "http://www.zddqac.com/storage/uploads/20210830/c4d1cccaee51b802d010c1e334350ba8.jpg",  
                        goods_price: "面议",  
                        goods_sliders: "",  
                        goods_spec: "",  
                        id: 55,  
                        is_miao: 0,  
                        lessstone: "钻石 红宝石",  
                        mainstone: "绿松99.32ct",  
                        nums: "5",  
                        status: 1,  
                        total_quality: "41.27g",  
                        update_time: 1630310160  
                    }  
                ]  
            })  
            function submitOrder(){  
                validator.check(data.form,data.rule)  
                console.log('看到这里的时候就说明成功')  
            }  
            function closeModal(){  
                data.orderId = ''  
                data.show = false  
            }  
            function callBack(e,item){  
                item.isChoosed = e  
                if(data.choosed_arr.includes(item.id)){  
                    data.choosed_val.splice(data.choosed_arr.indexOf(item.id),1)  
                    data.choosed_arr.splice(data.choosed_arr.indexOf(item.id),1)  
                    if(!isNaN(item.goods_price)){  
                        data.total_price = data.total_price-parseFloat(item.goods_price)*parseInt(item.nums)  
                    }  
                }else{  
                    data.choosed_arr.push(item.id)  
                    data.choosed_val.push({goods_id:item.id,nums:parseInt(item.nums)})  
                    if(!isNaN(item.goods_price)){  
                        data.total_price = data.total_price+parseFloat(item.goods_price)*parseInt(item.nums)  
                    }  
                }  
                if(data.new_list.length===data.choosed_arr.length){  
                    data.isChoosed = true  
                }else{  
                    data.isChoosed = false  
                }  

            }  
            function callBackAll(e){  
                data.isChoosed = e  
                data.total_price = 0  
                data.choosed_arr = []  
                data.choosed_val = []  
                data.new_list.map(item=>{  
                    if(e){  
                        item.isChoosed = true  
                        if(!isNaN(item.goods_price)){  
                            data.total_price = data.total_price+parseFloat(item.goods_price)*parseInt(item.nums)  
                        }  
                        data.choosed_arr.push(item.id)  
                        data.choosed_val.push({goods_id:item.id,nums:parseInt(item.nums)})  
                    }else{  
                        item.isChoosed = false  
                    }  
                })  
            }  
            function showModal(){  
                if(data.choosed_arr.length){  
                    data.show = true  
                }  
            }  
            function checkTotalPrice(){  
                data.total_price = 0  
                data.choosed_val = []  
                data.new_list.map(item=>{  
                    if(data.choosed_arr.includes(item.id)){  
                        data.choosed_val.push({goods_id:item.id,nums:parseInt(item.nums)})  
                        if(!isNaN(item.goods_price)){  
                            data.total_price = data.total_price+parseFloat(item.goods_price)*parseInt(item.nums)  
                        }  
                    }  
                })  
            }  
            function numsBack(e,item){  
                item.nums = e  
                checkTotalPrice()  
            }  
            return{...toRefs(data),numsBack,callBack,callBackAll,closeModal,showModal,submitOrder}  
        },  
        components:{step,radiocircle,normalBtn,modal,nodata}  
    }  
</script>  

<style lang="scss">  
    page{  
        background: $uni-bg-color-grey;  
    }  
    .goods_pic{  
        width: 221upx;  
        height: 219upx;  
        border-radius: 21upx;  
    }  
</style>  

为了避免加入购物车没有登录权限,可以建立一个页面,代码如上,在page.json中定义一下,运行即可调试,此页面的数据是写死的,要真机才会复现,是真机!!!

1***@qq.com

1***@qq.com

你好

z***@126.com

z***@126.com (作者) - 没有

以上那个代码是这样的。
news_list初始值为空数组,然后在onMounted里。 重新赋值给它,测试的时候。代码包中App.vue里的store.dispatch('user/getInfo')删除掉,一定要删除掉再建立一个新的页面,页面代码我提供了,然后page.json中定义好这个页面,再用真机看那个新的页面啊,我口已干,拜托官方不要嫌烦,请从头到尾看一下问题,以及我自己的回复,不要直接拿代码包去运行,因为有登录鉴权,自己的appid是验不过去的

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