微信小程序遍历时,有相同元素时遇到的问题
问题描述:
我在遍历数组时,如果有相同的元素的话,勾选一个元素时另一个元素也会勾选。因为我的这个数组是动态数组,所以没有唯一的标识,(我没搜到怎么给动态数组定义唯一标识?)就连下标也在变化(因为会删除数组中间的元素)。
下面是代码:
这是页面数组的代码
<view
class="incompleteOption"
wx:for="{{inputArray}}"
wx:for-index="index"
wx:key='*this'
>
<checkbox-group bindchange="completedPlan">
<checkbox value="{{index}}" checked="{{false}}">
{{item}}
</checkbox>
</checkbox-group>
</view>
<view class="finshNavigation">
<text>已完成</text>
</view>
<view
class="incompleteOption"
wx:for="{{checkArr}}"
wx:for-item="item"
wx:key="*this"
id="{{index}}"
>
<checkbox checked="{{true}}"></checkbox>
{{item}}
</view>
这是js
const app = getApp()
Page({
data: {
checkArr:['已完成?'],
inputArray:['你好,欢迎使用计划通'],
//存放输入内容的数组
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName'), // 如需尝试获取用户信息可改为false
},
//输入框传递输入的内容到缓存key:inputData当中
deliverValue(e){
// 获取输入框的值用于监听
this.setData({
btnChange:e.detail.value
})
wx.setStorage({
data: e.detail.value,
key: 'inputData',
})
},
click(){
//点击按钮获取缓存数据
var inputArray
var that=this
wx.getStorage({
key:'inputData',
success(res){
that.data.inputArray.push(res.data);
//数组是字符类型,不是对象所以返回要用({})不是[{}]
that.setData({
inputArray:that.data.inputArray
})
}
})
// 点击按钮清空输入框的值,使用按钮样式改变
this.setData({
btnChange:""
})
//使用完后清除缓存
wx.removeStorage({
key: 'inputData',
})
},
//点击复选框使之变成已经完成
completedPlan:function(e){
var checkArr
var inputArray
//因为传过来的e.detail.value是input数组的下标,所以用下标将已勾选对应的数组赋值给checkArr
this.data.checkArr.push(this.data.inputArray[e.detail.value]);
//勾选之后删除input数组元素
this.data.inputArray.splice(e.detail.value,1);
console.log
this.setData({
checkArr:this.data.checkArr,
inputArray:this.data.inputArray
})
},
这是演示:
答
添加的时候绑定一个key值 Date.now()