2022-03-25 【待办Todo】day04-渲染数据

一、渲染待办列表数据

1. 使用 v-for 循环渲染

<van-cell-group v-for="item in items" :key="item.id">
  ...
</van-cell-group>

v-for：循环渲染指令
items：data 中的数组
item：数组中的每一项
item.id：每一项的索引
:key：用于提升性能

2. 修改 Cell 单元格组件

<van-cell-group inset v-for="item in todoList" :key="item._id">
  <van-cell center :title="item.name" value="开始" :label="item.time + '分钟'" />
</van-cell-group>

3. 效果预览

二、实现滑动编辑和删除

1. 使用 SwipeCell 滑动单元格组件

2. html 部分代码

<van-cell-group inset v-for="item in todoList" :key="item._id">
  <van-swipe-cell>
	<template #left>
	  <van-button square type="primary" text="编辑" />
	</template>
	<van-cell center :title="item.name" value="开始" :label="item.time + '分钟'" />
	<template #right>
	  <van-button square type="danger" text="删除" />
	</template>
  </van-swipe-cell>
</van-cell-group>

3. css 部分代码

.van-cell-group {
  margin: 16px;
  .van-swipe-cell {
    .van-cell {
      background-color: #ffe;
    }
    .van-button {
      height: 100%;
    }
  }
}

三、点击编辑获取待办详情

1. 为点击事件绑定方法并传参

<van-button square type="primary" text="编辑" @click="editTodo(item._id)" />

2. 使用参数查询并显示弹窗

editTodo (id) {
  const db = this.$store.state.app.database()
  const todo = db.collection('todo')
  todo.doc(id).get().then(res => {
	this.todoForm = res.data[0]
	this.showDialog = true
  })
}

3. 效果预览

四、使用一个字段标记添加和编辑行为

1. 在 data 中添加一个 isUpdate 字段，值为 false

这里定义 isUpdate 的值是 false 时为添加待办，是 true 时为编辑待办

2. 修改 editTodo 方法

在开头设置 this.isUpdate = true

3. 修改弹窗部分代码

<van-dialog v-model="showDialog" :title="isUpdate ? '编辑待办' : '添加待办'" show-cancel-button :before-close="beforeClose" @closed="reset" @confirm="submit">
  ...
</van-dialog>

五、点击确认提交更新数据

1. 根据 isUpdate 的值判断行为

提交后先判断 isUpdate 的值，若为 true 则执行编辑操作，否则执行添加操作

2. 修改 setTodo 方法

代码如下

setTodo () {
  const db = this.$store.state.app.database()
  const todo = db.collection('todo')
  if (this.isUpdate) {
	todo.doc(this.todoForm._id).update({
	  name: this.todoForm.name,
	  time: this.todoForm.time
	}).then(() => {
	  this.$toast({
		message: '编辑成功',
		position: 'top'
	  })
	  this.showDialog = false
	  this.getTodo()
	})
  } else {
	todo.add(this.todoForm).then(() => {
	  this.$toast({
		message: '添加成功',
		position: 'top'
	  })
	  this.showDialog = false
	  this.getTodo()
	})
  }
}

3. 弹窗关闭后重置 isUpdate 为 false

修改 reset 方法

reset () {
  this.todoForm = this.$options.data().todoForm
  this.$refs.todoFormRef.resetValidation()
  this.isUpdate = false
}

六、实现删除待办功能

1. 为删除按钮添加点击事件

绑定删除待办的方法并传入参数

<van-button square type="danger" text="删除" @click="removeTodo(item._id)" />

2. 添加 removeTodo 方法

代码如下

removeTodo (id) {
  this.$dialog.confirm({
	message: '确定删除吗？'
  }).then(() => {
	const db = this.$store.state.app.database()
	const todo = db.collection('todo')
	todo.doc(id).remove().then(() => {
	  this.$toast({
		message: '删除成功',
		position: 'top'
	  })
	  this.getTodo()
	})
  }).catch(() => {})
}