代码如下：
<view class="myrow">
<text class="cartnum">{{item.num}}</text>
<uni-number-box v-model="item.num" :value="item.num" :min="0" color="#000" @blur="" @focus="" @change="cartnum($event,item,index)"/>
</view>图示如下：
图一
在图一中的第三行点击减号删除第三行后，原第四行变为第三行，如图二所示，text中的数字显示正常，但uni-number-box组件中的数字变为0，这是不正常的，参考代码中的变量值。点击上面的每一行都是同样的问题，
请教应该如何使uni-number-box组件中的数字正常显示？
爱豆豆 - 办法总比困难多
用id作为key 就可以了
<template>
<view class="mymain">
<template :key="item.id" v-for="(item,index) in cart">
<view class="myrow">
<text class="cartnum">{{item.num}}</text>
<uni-number-box v-model="item.num" :min="0" color="#000" @blur="" @focus=""
@change="cartnum($event,item,index)" />
</view>
</template>
</view>
</template>
<script>
export default {
data() {
return {
cart: [{
num: 1,
id:'1'
}, {
num: 1,
id:'2'
}, {
num: 1,
id:'3'
}, {
num: 1,
id:'4'
}]
}
},
methods: {
cartnum(num, item, index) {
let tmpcart = this.cart;
if (num > 0) {
tmpcart[index].num = num;
this.cart = tmpcart;
} else {
if (this.cart.length > 1) {
tmpcart.splice(index, 1);
this.cart = tmpcart;
} else {
let that = this;
uni.showModal({
title: '提示',
content: '即将清空您的购物车！',
showCancel: false,
success: function(res) {
if (res.confirm) {
that.cart = [];
}
}
});
}
}
}
}
}
</script>
<style>
.mymain {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 20%;
}
.myrow {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.cartnum {
margin: 0rpx 26rpx;
}
</style>
易者 (作者)
整个页面代码如下：
<template>
<view class="mymain">
<template v-for="(item,index) in cart">
<view class="myrow">
<text class="cartnum">{{item.num}}</text>
<uni-number-box v-model="item.num" :min="0" color="#000" @blur="" @focus="" @change="cartnum($event,item,index)"/>
</view>
</template>
</view>
</template>
<script>
export default {
data() {
return {
cart:[
{num:1},{num:1},{num:1},{num:1},{num:1},{num:1},{num:1}
]
}
},
methods: {
cartnum(num,item,index){
let tmpcart = this.cart;
if(num>0){
tmpcart[index].num = num;
this.cart = tmpcart;
}else{
if(this.cart.length>1){
tmpcart.splice(index, 1);
this.cart = tmpcart;
}else{
let that = this;
uni.showModal({
title: '提示',
content: '即将清空您的购物车！',
showCancel: false,
success: function (res) {
if (res.confirm) {
that.cart=[];
uni.navigateBack({
delta: 0,
});
}
}
});
}
}
}
}
}
</script>
<style>
.mymain{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 20%;
}
.myrow{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.cartnum{
margin: 0rpx 26rpx;
}
</style>页面初始效果图如下：
DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位
京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001
易者 (作者)
确实是没有绑定key的问题，都怪我！template标签绑定key报错，换成block标签即可。问题已解决，非常感谢爱豆豆！
2023-07-29 16:13
易者 (作者)
我绑定key后测试了一下H5、微信小程序、抖音小程序都正常，就是快手小程序还存在本帖描述的问题，咋办呢？
2023-07-29 19:22
爱豆豆
回复 易者: 快手小程序没有测试号 我没法测试 还得企业主体才可以注册小程序。或者你提供一个快手小程序账号给我测试一下
2023-07-31 09:58
易者 (作者)
回复 爱豆豆: 是需要快手APPID吗？我给你发私信没权限。
2023-07-31 20:20
爱豆豆
回复 易者: 你加我qq 2087592068
2023-08-01 09:24