uni-app ios nuve list 组件下的input组件，随着页面上下滑动，v-model绑定的值消失了

开发环境	版本号	项目创建方式
Mac	Monterey 12.2.1 (21D62)	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.3.11

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：苹果X 苹果12 苹果8

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：

<template>  
    <div class="flex">  
        <list class="list">  
            <cell class="item"></cell>  
            <cell>  
                <input class="input" type="text" confirm-type="search" placeholder="输入内容 -> 滑到底部再滑到顶部 -> 输入内容消失" v-model="p.v" />  
            </cell>  
            <cell class="item"></cell>  
            <cell class="item"></cell>  
        </list>  
    </div>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                p: {  
                    v: ''  
                }  
            }  
        },  
    }  
</script>  

<style scoped lang="scss">  
    .flex {  
        flex: 1;  
    }  

    .list {  
        position: absolute;  
        top: 0;  
        left: 0;  
        right: 0;  
        bottom: 0;  
        background-color: #f0f0f0;  
    }  

    .input {  
        flex: 1;  
        margin: 0 30rpx;  
        height: 90rpx;  
        font-size: 28rpx;  
    }  

    .item {  
        width: 750rpx;  
        height: 500px;  
        background-color: #a9a9a9;  
    }  
</style>
`

htzhanglong 1楼•1 个月前

@DCloud_iOS_WZT @DCloud_HB_WTC

wuwangju 2楼•1 个月前

@DCloud_HB_HXY

yuanlaile 3楼•1 个月前

问题复现，已反馈给相关人员排查，已加分感谢反馈！

zlyuanteng 4楼•1 个月前

这个bug 还不解决等着炒饭吃啊

gougou168 5楼•1 个月前

回复梅花三: 下次发版就会带上了

htzhanglong 6楼•1 个月前

HBuilder X 3.5.1-alpha已修复

wuwangju 7楼•1 个月前

在 Uni-App 中使用 list 组件时，如果 input 组件绑定 v-model 的值在页面上下滑动时消失了，这通常是由于 Uni-App 的列表渲染机制导致的。为了提高性能，Uni-App 的 list 组件（如 scroll-view 或 swiper）会对列表项进行复用，这可能导致 input 组件在滑动时失去其绑定的值。

解决方案

使用 key 属性：为每个列表项添加唯一的 key 属性，确保 Uni-App 在渲染时可以正确识别和复用组件。

<scroll-view>
  <view v-for="(item, index) in list" :key="index">
    <input v-model="item.value" placeholder="请输入内容" />
  </view>
</scroll-view>

使用 data 属性绑定：将 input 组件的值绑定到列表项的 data 属性上，而不是直接绑定到 v-model。

<scroll-view>
  <view v-for="(item, index) in list" :key="index">
    <input :value="item.value" @input="onInput(index, $event)" placeholder="请输入内容" />
  </view>
</scroll-view>

export default {
  data() {
    return {
      list: [
        { value: '' },
        { value: '' },
        // 其他列表项
      ]
    };
  },
  methods: {
    onInput(index, event) {
      this.list[index].value = event.detail.value;
    }
  }
};

使用 v-for 的 track-by 属性：在 Uni-App 中，v-for 支持 track-by 属性，可以通过它来指定一个唯一的标识符，以确保列表项在渲染时能够正确复用。

<scroll-view>
  <view v-for="(item, index) in list" :key="item.id" track-by="id">
    <input v-model="item.value" placeholder="请输入内容" />
  </view>
</scroll-view>

避免使用 v-model：如果以上方法仍然无效，可以尝试完全避免使用 v-model，而是通过 :value 和 @input 手动管理 input 组件的值。

<scroll-view>
  <view v-for="(item, index) in list" :key="index">
    <input :value="item.value" @input="onInput(index, $event)" placeholder="请输入内容" />
  </view>
</scroll-view>

export default {
  data() {
    return {
      list: [
        { value: '' },
        { value: '' },
        // 其他列表项
      ]
    };
  },
  methods: {
    onInput(index, event) {
      this.list[index].value = event.detail.value;
    }
  }
};