当试图选中复选框或按下按钮,然后将字体更改为删除线时,我试图使待办事项状态属性从活动更改为完成。我应该制作一个使用更新后功能的单独功能,还是应该专门为此制作一条新的路线?
提交待办事项后,它会从state属性中进入“活动”状态。
此外,如何获取复选框的状态,以了解是否已选中该复选框?
基于此,我想将文本更改为具有删除线,并更新我检查为完整的元素的state属性。
<template lang="html">
<div>
<form v-on:submit='addTodo($event)'>
<input type='text' placeholder='Add or edit a todo' v-model='newTodo'/>
<textarea placeholder='Add or edit a description' v-model='newDescription'></textarea>
<input type='submit' />
</form>
<ul>
<li v-for='todo in todos' :key='todo._id'>
<input type='checkbox'>
<button @click="deleteTodo(todo._id)">X</button>
<p>{{todo.title}}</p>
<p>{{todo.description}}</p>
<button @click="updateTodo(todo._id)">Edit</button>
</li>
</ul>
</div>
</template>
<script>
import ToDoAPI from '@/services/ToDoAPI.js'
export default {
data () {
return {
newTodo: '',
newDescription: '',
state: 'active',
todos: []
}
},
mounted () {
this.loadTodos()
},
methods: {
async addTodo (evt) {
evt.preventDefault() // prevents the form's default action from redirecting the page
const response = await ToDoAPI.addTodo(this.newTodo, this.newDescription, this.state)
this.todos.push(response.data)
this.newTodo = '' // clear the input field
this.newDescription = '' //clear description
},
async loadTodos () {
const response = await ToDoAPI.getToDos()
this.todos = response.data
},
deleteTodo(todoID){
ToDoAPI.deleteTodo(todoID)
//remove the array element with matching id
this.todos = this.todos.filter(function(obj){
return obj._id !== todoID
})
},
//add an update function to update each todo
async updateTodo(todoID){
await ToDoAPI.updateTodo(todoID, this.newTodo, this.newDescription)
this.loadTodos()
this.newTodo = '' // clear the input field
this.newDescription = '' //clear description
}
}
}
</script>
<style lang="css">
textarea {
resize: none;
}
li{
border: 1px;
border-style: solid;
border-color: black;
margin-top: 10px;
}
</style>
//express setup
//the routes
//get the todos to display (READ)
app.get("/todo", (req, res) => {
const collection = client.db('todoapp').collection("todos"); //connecting to the atlas collection
collection.find().toArray(function (err, results){ //filtering the results
if(err){
console.log(err)
res.send([])
return
}
res.send(results)
})
})
//add a todo (CREATE)
app.post('/addTodo', (req, res) => {
const collection = client.db('todoapp').collection('todos')
let todo = req.body.todo //parse the data from the request body
let description = req.body.description
let state = req.body.state
collection.insert({title: todo , description: description , state: state}, function(err, results) {
if (err){
console.log(err);
res.send('');
return
}
res.send(results.ops[0]) //retruns the new document
})
})
//delete a todo (DELETE)
app.post('/deleteTodo', (req, res) => {
const collection = client.db('todoapp').collection('todos');
// remove the document by the unique id
collection.removeOne({'_id': mongo.ObjectID(req.body.todoID)}, function(err, results){
if(err) {
console.log(err)
res.send('')
return
}
res.send()
})
})
// add an update functio to update the existing mongodb data by its unique id
//update a todo (UPDATE)
app.post('/updateTodo', (req, res) => {
const collection = client.db('todoapp').collection('todos');
let todo = req.body.todo;
let description = req.body.description;
let state = req.body.state;
const updateOperation = {};
if(todo) updateOperation.title = req.body.todo;
if(description) updateOperation.description = req.body.description;
if(state) updateOperation.state = req.body.state;
collection.update({'_id': mongo.ObjectID(req.body.todoID)}, {$set: {...updateOperation}}, function(err, results){
if(err) {
console.log(err)
res.send('')
return
}
res.send()
})
})
//axios setup
import API from '@/services/API'
export default {
getToDos () {
return API().get('todo') // connecting to the api
},
addTodo (todo, description, state) {
return API().post('addTodo', {
todo: todo, // add our data to the response body
description: description,
state: state
})
},
deleteTodo (todoID) {
return API().post('deleteTodo', {
todoID: todoID // add data to the request body
})
},
updateTodo (todoID, todo, description) {
return API().post('updateTodo', {
todoID: todoID,
todo: todo,
description: description
})
}
}