文章目录
1 请求后台接口list 获取 数据展示到页面上
- 发送ajax请求
- 在mounted 钩子中将数据渲染到页面上
axios.defaults.baseURL = 'http://localhost:3001/';
new Vue({
data: {
currentEditing: null,
todos: []
},
mounted() {
# 1.2 在mounted 钩子中将数据渲染到页面上
this.getList()
},
methods: {
# 1.1 发送ajax请求
getList() {
axios.get('list').then(res => {
console.log(res.data)
this.todos = res.data
})
}
}
})
2 增加内容
addTodo(todoText) {
axios.post('add', {
title: todoText,
}).then(res => {
# 在请求成功之后重新渲染页面
this.getList()
})
// 清空文本框
event.target.value = ''
}, event.target.value = '' },
3 双击修改列表信息
## 子组件中 需要把当前id 传递过去
<input class="edit"
@keyup.enter="saveEdit(item, $event)"
@blur="saveEdit(item, $event)"
:value="item.title"
@keyup.esc="currentediting = null">
saveEdit(item, event) {
var editText = event.target.value.trim()
console.log(item, '--------')
this.$emit("save-edit", editText, item)
},
### 父组件方法
### 因为我们所有的数据增删改查都是在父组件中修改 所有ajax也在父组件的 方法中发送
// 保存编辑项
saveEdit(editText, item) {
axios.put(`list/${item.id}`, {
title: editText,
}).then(res => {
this.getList()
// 3. 去除 editing 样式
this.currentEditing = null
})
}
4 删除列表信息
# 4.1 需要把删除按钮的id 传递过去
<button class="destroy" @click="removetodoParent(item.id, $event)"></button>
# 父组件
### 因为我们所有的数据增删改查都是在父组件中修改 所有ajax也在父组件的 方法中发送
// 删除任务项
removetodo(delIndex) {
axios.delete(`list/${delIndex}`).then(res => {
this.getList()
})
},
5 删除全部完成
# 父组件
### 因为我们所有的数据增删改查都是在父组件中修改 所有ajax也在父组件的 方法中发送
removeAllDone() {
axios.delete('deleteall').then(res=>
this.getList()
})
6 实现全选功能
#2 把数据更新放在父组件中
<mylist @get-list="getList()" ></mylist>
computed: {
toggleStat1: {
get() {
return this.todos.every(item => item.completed)
},
set(val) {
axios.get(`all/${Number(val)}`).then(res => {
#1 子组件通知父组件更新数据
this.$emit('get-list')
})
}
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
