<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>
8***@qq.com
- 发布：2021-07-13 14:14
- 更新：2021-09-03 14:05
- 阅读：1013
产品分类： uniapp/小程序/百度
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： macOS Big Sur 11.2.3
第三方开发者工具版本号： 3.34.1
基础库版本号： 3.310.36
项目创建方式： CLI
CLI版本号： 2.0.0-31420210305001
示例代码：
操作步骤：
<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
上面代码是渲染4个输入框，有2个方法，一个删除第一项，一个往头部插入一项；
我给四个输入框分别输入1，2，3，4四个值，点击删除第一项时，剩下3个输入框应该分别是2，3，4，再点击插入时应该分别是空输入框，2，3，4
实际结果：
实际上点击删除变成了1，2，3；点击插入变成了1，2，3，空输入框；说明v-for里面的key并没有起作用，没有保持组件的状态；
实际上点击删除变成了1，2，3；点击插入变成了1，2，3，空输入框；说明v-for里面的key并没有起作用，没有保持组件的状态；
bug描述：
uniapp编译百度小程序的时候v-for里添加:key不起作用，列表渲染的顺序有问题，看了编译后的代码应该就是uniapp的问题，百度小程序里好像不支持:key的语法 而是用的trackBy语法。
8***@qq.com (作者)
感谢回复 但还是不行哦 还是没有保留组件的状态 你们可以试下百度小程序针对这块的案例：
百度小程序循环优化
-
-
8***@qq.com (作者)
回复 DCloud_UNI_LXH: 试试分别在输入框里输入1、2、3、4，点击新增首项，预期结果：之前4个已有输入值的input依旧保持原有输入值，即5个输入框分别为：空、1、2、3、4，实际结果：1、2、3、4、空
2021-09-03 15:44
-
-
8***@qq.com (作者)
大哥，这个问题在最新版本里还没有修复啊。。感觉这是个高频的需求啊，这个搞不定的话咱这百度小程序基本没法用啊。。条件编译根本解决不了这个问题啊，等了一个多月等了个寂寞吗
2021-09-02 14:44
DCloud_UNI_LXH
回复 8***@qq.com: 已经修复了，你可以内测一下
2021-09-02 17:56
JHLEE
最新版本HX没有修复这个问题，这个同感觉很高频啊。。
2021-09-12 23:01
DCloud_UNI_LXH
回复 JHLEE: 看下面回复
2021-09-14 15:18
JHLEE
回复 DCloud_UNI_LXH: 我前几天覆盖了这个，不知道因为什么重新安装了。。mac版本
2021-09-14 17:10