Vue @change 应该更新数据库

Question

我正在创建一个 todolist 并尝试让我的复选框更改 vue 和我的数据库中的属性。如果选中复选框，则复选框应将活动状态更改为 true，如果设置为未选中，则更改为 false。

Vue HTML the v-model change the "active" property. @change should call the function

 <label> active task:  </label> <input type="checkbox"  
     @change="updateActive(todo.id)" v-model="todo.active"> 

The function. If the checkbox is changed from check to uncheck, change the active status to false, vice versa. The error says that e is undefined

    updateActive: function (e){
    if(e.target.checked){

        let url = "/update-task1?active=" + true + "&id=" + id
        fetch(url, {
            method: "PUT",

        })
            .catch(error => {
                console.error('error', error)
            }),
            this.fetchData();

    } else {

        let url = "/update-task1?active=" + false + "&id=" + id
        fetch(url, {
            method: "PUT",

        })
            .catch(error => {
                console.error('error', error)
            }),
            this.fetchData();

    }
},

Express to update the task

app.put('/update-task', function (req, res) {
let collection = 'tasks'
MongoClient.connect(url,
    { useUnifiedTopology: true },
    function (err, db) {
        if (err) throw err;

        let completed = req.query.completed;
        let query = parseInt(req.query.id);
        let completedNewValue = { $set: { 'completed': completed } };
        let updateItem = { 'id': query };
        let databaseobject = db.db("agiledb");

        databaseobject.collection(collection).updateOne(updateItem, completedNewValue),
            function (err, res) {
                if (err) throw err;
                console.log("active");
                db.close();
            };
    });
    });

Property being created in addTodo

    methods: {
    addTodo: function ({target}) {
        if(this.newTodo.trim().length == 0){
            return
        } else {
            console.log("wack")
            this.todos.push({
                id: Date.now(),
                title: this.newTodo,
                created: true,
                active: false,
                completed: false,
                editing: false,
                assigned: this.newAssigned,
            });
            axios.post('/todo', {
                id: Date.now(),
                title: this.newTodo,
                created: true,
                active: false,
                completed: false,
                editing: false,
                assigned: this.newAssigned,
            })

感谢您的帮助

Answer 1

您要么使用传递的todo.id，要么使用todo.id 之外的事件本身：

@change="updateActive($event, todo.id)"

updateActive: function (e, todoId){
...
}