微信小程序todo 二维数组添加新待办

Question

问题遇到的现象和发生背景

微信小程序todo案例

问题相关代码，请勿粘贴截图

<view class="container">
  <view class="addsentence">
    <image src="../../image/icon/plusitem.png" bindtap="addToListBtn"></image>
    <input type="text" placeholder="请输入..." value="{{input}}" bindinput="inputToList"/>
  </view>
</view>
<view class="box">
  <view wx:for="{{list}}" wx:key="superindex" class="one">
    <view class="onedot"></view>
    <view wx:if="{{index!=list.length-1}}" class="oneline"></view>
    <view class="onemain">
      <view class="onemaintime"> {{item.title}}</view>
      <view class="oneunderline"></view>
      <view class="onemaintodo">
        <view wx:for="{{item.todo}}" wx:for-item="todo" wx:key="todoindex" class="todo">
          <icon type="{{todo.completed?'success':'circle'}}" size="16"/>
          <text>{{todo.name}}</text>
        </view>
      </view>
      <view class="onemainprogress">{{item.progress}}</view>
    </view>
  </view>
</view

Page({

    /**
     * 页面的初始数据
     */
    data: {
        input:' ',
        list:[{
                title:"2022/7/8",//之后要自动填充
                todo:[{
                    name:"捡垃圾",
                    completed:false
                },{
                    name:"吃午饭",
                    completed:false
                },{
                    name:"修照片",
                    completed:true
                }],
                progress:"完成度:90%"
            }
        ]

    },


    inputToList(e){
        //传输入框值
        console.log(e.detail.value);
        this.setData({
          input: e.detail.value
        });
    },

    addToListBtn(){
        //+号功能
        console.log(this.data.input)
        var todos= this.data.list.todo;

        list.todo.push({       
            name: this.data.input,
            completed: false
         })

        this.setData({
         todos: list.todo
        });
    },

.container {
  border-top: 1rpx solid #cdcdcd;
  padding: 20rpx;
}
.addsentence {
  margin: 0 auto;
  display: flex;
  align-items: center;
  width: 90vw;
  margin: 10rpx;
  padding: 20rpx;
  border: 1px solid #cdcdcd;
  border-radius: 14rpx;
  box-sizing: border-box;
}
.addsentence input {
  flex: 1;
  height: 40rpx;
}
.addsentence image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}
.box {
  padding: 30rpx;
}
.one {
  position: relative;
  padding-bottom: 40rpx;
}
.onedot {
  left: 5rpx;
  width: 25rpx;
  height: 25rpx;
  position: absolute;
  background-color: #36678f;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.oneline {
  position: absolute;
  left: 15rpx;
  height: 100%;
  border-left: 2px solid #e4e7ed;
}
.onemain {
  position: relative;
  padding-left: 45rpx;
  top: -5rpx;
}
.onemaintime {
  margin-bottom: 16rpx;
  padding-top: 8rpx;
  color: #525252;
  line-height: 0.95;
  font-size: 27rpx;
}
.onemaincon {
  font-size: 32rpx;
  color: #112714;
}
.onemaintodo {
  font-size: 32rpx;
  margin: 3rpx;
  color: #112714;
}
.onemaintodo .todo {
  display: flex;
  align-items: center;
  padding: 10rpx;
}
.todo text {
  flex: 1;
  margin-left: 15rpx;
  color: #112714;
}
.onemainprogress {
  margin-bottom: -28rpx;
  padding-top: 8rpx;
  color: #999;
  line-height: 1;
  font-size: 21rpx;
}

运行结果及报错内容

无法添加新待办事项

我的解答思路和尝试过的方法

我想要达到的结果

无法添加新待办事项
还想问问自动填充时间至title以及完成度的计算方式

Answer 1

效果:

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    input: ' ',
    list: [{
      title: "2022/7/8",//之后要自动填充
      todo: [{
        name: "捡垃圾",
        completed: false
      }, {
        name: "吃午饭",
        completed: false
      }, {
        name: "修照片",
        completed: true
      }],
      progress: "完成度:90%"
    }
    ]
  },


  inputToList(e) {
    //传输入框值
    console.log(e.detail.value);
    this.setData({
      input: e.detail.value
    });
  },

  addToListBtn() {
    //+号功能
    console.log(this.data.input)
    // 由于list是个数组
    // 先要搜索当前插入的下标索引
    var todayIdx = this.data.list.findIndex(item => item.title === this.getDateStr())
    if (todayIdx > -1) {
      var todos = this.data.list[todayIdx].todo;
      todos.push({
        name: this.data.input,
        completed: false
      })
      // 刷新数组
      this.setData({
        [`list[${todayIdx}].todo`]: todos
      });
    }
    else {
      // 刷新数组
      this.setData({
        [`list[${this.data.list.length}]`]: {
          title: this.getDateStr(),
          todo: [
            {
              name: this.data.input,
              completed: false
            }
          ]
        }
      });
    }

  },
  checkTodo(e) {
    const { index, todoindex } = e.currentTarget.dataset;
    this.setData({
      [`list[${index}].todo[${todoindex}].completed`]: !this.data.list[index].todo[todoindex].completed
    })
  },
  // 获取当前日期字符串
  getDateStr(d) {
    if (!d) d = new Date();
    let year = d.getFullYear();
    let month = d.getMonth() + 1;
    let day = d.getDate();
    return `${year}/${month}/${day}`
  }
})

index.wxml

<wxs module="tools">
  module.exports.getProgress = function (todo) {
    console.log(todo);
    var length = todo.length; // 总量
    var checked = 0;
    for (var i = 0; i < todo.length; i++) {
      if (todo[i].completed) {
        checked++;
      }
    }
    return '完成度:' + (checked / length * 100).toFixed(2) + '%'
  }
</wxs>
<view class="container">
  <view class="addsentence">
    <image src="../../image/icon/plusitem.png" bindtap="addToListBtn"></image>
    <input type="text" placeholder="请输入..." value="{{input}}" bindinput="inputToList" />
  </view>
</view>
<view class="box">
  <view wx:for="{{list}}" wx:key="superindex" class="one">
    <view class="onedot"></view>
    <view wx:if="{{index!=list.length-1}}" class="oneline"></view>
    <view class="onemain">
      <view class="onemaintime"> {{item.title}}</view>
      <view class="oneunderline"></view>
      <view class="onemaintodo">
        <!-- 增加点击事件 -->
        <view wx:for="{{item.todo}}" wx:for-item="todo" wx:for-index="todoIndex" wx:key="todoIndex" class="todo" bindtap="checkTodo" data-todoindex="{{todoIndex}}" data-index="{{index}}">
          <icon type="{{todo.completed?'success':'circle'}}" size="16" />
          <text>{{todo.name}}</text>
        </view>
      </view>
      <view class="onemainprogress">{{tools.getProgress(item.todo)}}</view>
    </view>
  </view>
</view>

由于样式没改所以就不沾了.