微信小程序遍历时,有相同元素时遇到的问题

微信小程序遍历时,有相同元素时遇到的问题

问题描述:

我在遍历数组时,如果有相同的元素的话,勾选一个元素时另一个元素也会勾选。因为我的这个数组是动态数组,所以没有唯一的标识,(我没搜到怎么给动态数组定义唯一标识?)就连下标也在变化(因为会删除数组中间的元素)。

下面是代码:
这是页面数组的代码

<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
   })
  },

这是演示:

img

添加的时候绑定一个key值 Date.now()