uni-app textarea 真机测试双向绑定失效

uni-app textarea 真机测试双向绑定失效

示例代码：

<view>
    <view class="evaluate-con" v-for="(itemall,idx) in  orderCon" :key='idx'>  
        <view class="goodsStyle acea-row row-between" >  
            <view class="pictrue">  
                <image :src="itemall.productInfo.image" class="image" />  
            </view>  
            <view class="text acea-row row-between">  
                <view class="name line2 font-color-black">{{itemall.productInfo.storeName}}</view>  
            </view>  
        </view>  

        <starall name='描述相符' v-model="submitdata.productEvaluateParams[idx].productScore"/>  
        <view class="score">  
            <view class="textarea">  
                <textarea   
                    :data-idx = 'idx'  
                    @input='changesall($event,idx)'  
                 placeholder="从多个角度评价商品，可以帮助更多想买的人"   
                 :maxlength="300"></textarea>  
                <view class="list acea-row row-middle">  
                    <scroll-view scroll-x="true" class="scrollpictrue">  
                    <view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @click.stop="chooseImageall(idx)">  
                        <text class="iconfont icon-icon25201"></text>  
                        <view>发布买家秀</view>  
                    </view>  
                        <view class="pictrue"  
                        v-for="(item, uploadPicturesIndex) in submitdata.productEvaluateParams[idx]['pics']"   
                        :key="uploadPicturesIndex">  
                            <image :src="item" />  
                            <text class="iconfont icon-guanbi1 font-color-brown" @click.stop="delall(uploadPicturesIndex,idx)"></text>  
                        </view>       
                    </scroll-view>  
                </view>  
            </view>  
        </view>  

    </view>  
    <view class="starall">  
        <starall name='服务态度'  v-model="submitdata.serviceScore"/>  
    </view>  
    <view class="evaluate-btnview"></view>  
    <view class="evaluate-btn">  
        <view class="evaluateBnt bg-color-brown" @click="submit">发布</view>  
    </view>  
</view>

操作步骤：

<view>
    <view class="evaluate-con" v-for="(itemall,idx) in  orderCon" :key='idx'>  
        <view class="goodsStyle acea-row row-between" >  
            <view class="pictrue">  
                <image :src="itemall.productInfo.image" class="image" />  
            </view>  
            <view class="text acea-row row-between">  
                <view class="name line2 font-color-black">{{itemall.productInfo.storeName}}</view>  
            </view>  
        </view>  

        <starall name='描述相符' v-model="submitdata.productEvaluateParams[idx].productScore"/>  
        <view class="score">  
            <view class="textarea">  
                <textarea   
                    :data-idx = 'idx'  
                    @input='changesall($event,idx)'  
                 placeholder="从多个角度评价商品，可以帮助更多想买的人"   
                 :maxlength="300"></textarea>  
                <view class="list acea-row row-middle">  
                    <scroll-view scroll-x="true" class="scrollpictrue">  
                    <view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @click.stop="chooseImageall(idx)">  
                        <text class="iconfont icon-icon25201"></text>  
                        <view>发布买家秀</view>  
                    </view>  
                        <view class="pictrue"  
                        v-for="(item, uploadPicturesIndex) in submitdata.productEvaluateParams[idx]['pics']"   
                        :key="uploadPicturesIndex">  
                            <image :src="item" />  
                            <text class="iconfont icon-guanbi1 font-color-brown" @click.stop="delall(uploadPicturesIndex,idx)"></text>  
                        </view>       
                    </scroll-view>  
                </view>  
            </view>  
        </view>  

    </view>  
    <view class="starall">  
        <starall name='服务态度'  v-model="submitdata.serviceScore"/>  
    </view>  
    <view class="evaluate-btnview"></view>  
    <view class="evaluate-btn">  
        <view class="evaluateBnt bg-color-brown" @click="submit">发布</view>  
    </view>  
</view>

预期结果：

  • 双向绑定有值

实际结果：

  • 双向绑定无值

bug描述：

  • textarea 真机测试双向绑定失效

更多关于uni-app textarea 真机测试双向绑定失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app textarea 真机测试双向绑定失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，textarea组件在真机上的双向绑定确实存在一些已知问题。从你的代码来看，问题可能出现在以下几个方面：

  1. v-model在真机上的兼容性问题：你使用的是@input事件手动处理数据绑定，但真机上可能存在事件触发时机的问题。

  2. 数据更新机制：建议修改changesall方法，确保数据正确更新：

changesall(e, idx) {
    // 使用$set确保响应式更新
    this.$set(this.submitdata.productEvaluateParams[idx], 'comment', e.detail.value)
    // 或者使用直接赋值
    // this.submitdata.productEvaluateParams[idx].comment = e.detail.value
    // this.$forceUpdate() // 如果需要强制更新
}

  1. 初始化数据检查：确保submitdata.productEvaluateParams数组中的每个对象都包含comment字段，且初始值不为空。

  2. 替代方案：可以尝试使用@blur事件替代@input，在真机上可能更稳定：

<textarea 
    :data-idx='idx'
    @blur='changesall($event,idx)'
    :value="submitdata.productEvaluateParams[idx].comment"
    placeholder="从多个角度评价商品，可以帮助更多想买的人" 
    :maxlength="300">
</textarea>
回到顶部