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
问题已确认,已加分,后续修复
更多关于uni-app编译百度小程序时v-for里添加:key不起作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html
大哥,这个问题在最新版本里还没有修复啊。。感觉这是个高频的需求啊,这个搞不定的话咱这百度小程序基本没法用啊。。条件编译根本解决不了这个问题啊,等了一个多月等了个寂寞吗
最新版本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值未变,但位置发生了变化,这可能导致渲染异常。
建议尝试以下解决方案:
- 为每个数据项添加唯一id作为key:
<input v-for="item in list" :key="item.id" />
- 如果必须使用数组索引,可以尝试:
<input v-for="(item, index) in list" :key="index" />


