uni-app编译百度小程序时v-for里添加:key不起作用

uni-app编译百度小程序时v-for里添加:key不起作用

开发环境 版本号 项目创建方式
Mac macOS Big Sur 11.2.3 CLI
产品分类:uniapp/小程序/百度

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

基础库版本号:3.310.36

CLI版本号:2.0.0-31420210305001

### 示例代码:

```html
<template>  
    <div>  
        <input v-for="item in list" :key="item" placeholder="请输入" />  
        <button @click="deleteFirst">删除首项</button>  
        <button @click="addFirst">新增首项</button>  
    </div>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            list: [1, 2, 3, 4]  
        };  
    },  
    methods: {  
        deleteFirst() {  
            this.list.splice(0, 1);  
        },  
        addFirst() {  
            this.list.unshift(5);  
        }  
    }  
};  
</script>

操作步骤:

<template>  
    <div>  
        <input v-for="item in list" :key="item" placeholder="请输入" />  
        <button @click="deleteFirst">删除首项</button>  
        <button @click="addFirst">新增首项</button>  
    </div>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            list: [1, 2, 3, 4]  
        };  
    },  
    methods: {  
        deleteFirst() {  
            this.list.splice(0, 1);  
        },  
        addFirst() {  
            this.list.unshift(5);  
        }  
    }  
};  
</script>

预期结果:

上面代码是渲染4个输入框,有2个方法,一个删除第一项,一个往头部插入一项; 我给四个输入框分别输入1,2,3,4四个值,点击删除第一项时,剩下3个输入框应该分别是2,3,4,再点击插入时应该分别是空输入框,2,3,4

实际结果:

实际上点击删除变成了1,2,3;点击插入变成了1,2,3,空输入框;说明v-for里面的key并没有起作用,没有保持组件的状态;

bug描述:

uniapp编译百度小程序的时候v-for里添加:key不起作用,列表渲染的顺序有问题,看了编译后的代码应该就是uniapp的问题,百度小程序里好像不支持:key的语法 而是用的trackBy语法。


更多关于uni-app编译百度小程序时v-for里添加:key不起作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

问题已确认,已加分,后续修复

更多关于uni-app编译百度小程序时v-for里添加:key不起作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


大哥,这个问题在最新版本里还没有修复啊。。感觉这是个高频的需求啊,这个搞不定的话咱这百度小程序基本没法用啊。。条件编译根本解决不了这个问题啊,等了一个多月等了个寂寞吗

回复 8***@qq.com: 已经修复了,你可以内测一下

最新版本HX没有修复这个问题,这个同感觉很高频啊。。

回复 JHLEE: 看下面回复

回复 DCloud_UNI_LXH: 我前几天覆盖了这个,不知道因为什么重新安装了。。mac版本

将文件替换至
HX根目录\plugins\uniapp-cli\node_modules[@dcloudio](/user/dcloudio)\uni-template-compiler
对应的地方

感谢回复 还是不行哦 还是没有保留组件的状态

.swan文件里的语法确实是编译成了“list trackBy item”了 但是估计只更改那里的语法没有用

感谢回复 但还是不行哦 还是没有保留组件的状态 你们可以试下百度小程序针对这块的案例: 百度小程序循环优化

测的是你发的案例,测试表现一致啊,你测试是什么表现?

回复 DCloud_UNI_LXH: 试试分别在输入框里输入1、2、3、4,点击新增首项,预期结果:之前4个已有输入值的input依旧保持原有输入值,即5个输入框分别为:空、1、2、3、4,实际结果:1、2、3、4、空

回复 8***@qq.com: 说的这种情况确实有,待确认一下。现在删除操作应该是保持原有输入值了

回复 DCloud_UNI_LXH: 嗯 我使用百度的原生语法是没有问题的 麻烦能确认修改下 衷心的感谢你们的付出!

在百度小程序中,v-for:key确实存在兼容性问题。百度小程序原生支持的是track-by语法,而uni-app在编译到百度小程序时对:key的转换可能存在不足。

从你的代码来看,使用数组项的值作为key本身就不太合适。当删除首项后,剩余项的key值未变,但位置发生了变化,这可能导致渲染异常。

建议尝试以下解决方案:

  1. 为每个数据项添加唯一id作为key:
<input v-for="item in list" :key="item.id" />
  1. 如果必须使用数组索引,可以尝试:
<input v-for="(item, index) in list" :key="index" />
回到顶部