Javascript 带有Laravel和Vue.js v-model问题的待办事项列表

我用Laravel和Vue.js制作了一个TODO列表：我可以添加一个类别，并且可以为每个类别添加一个TODO列表。对于每个类别列表，都有一个用于为该类别添加新todo的输入

我用一个部件做了所有的东西。我用Laravel创建了api

一切都很完美。唯一的问题是：当我在输入“AddaTodo”中写入内容时，它也会写入其他输入。这是合乎逻辑的，因为在输入标记中有v-model指令

有可能绕过这种行为吗

vue组件的内容：

<template>
<div>
    <form @submit.prevent="addCategorie()">
        <!-- Grid row -->
        <div class="form-row align-items-center" style="margin-bottom: 2rem;">
            <!-- Grid column -->
            <div class="col-auto">
                <!-- Default input -->
                <input v-model="categorie.name" type="text" class="form-control" id="name" aria-describedby="name" placeholder="Categorie">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-auto">
                <button type="submit" class="btn btn-primary btn-md mt-0">Add</button>
            </div>
        </div>
        <!-- Grid row -->
    </form>
     <div class="row">
        <section v-for="(categorie) in categories" v-bind:key="categorie.id" class="col-sm-6 col-md-4">
                <div class="card" style="margin-bottom: 2rem;">
                    <div class="card-header align-items-center">
                        <h3>{{ categorie.name }}
                            <span @click="deleteCategorie(categorie.id)"  style="font-size: 24px; color: #FF3547;">
                                <i class="fas fa-trash-alt"></i>
                            </span>
                        </h3>
                        <input  v-on:keyup.enter="addTodo(categorie.id)" v-model="todo.name" type="text" class="form-control" id="name" aria-describedby="name" placeholder="Add a todo">
                    </div>
                    <ul v-for="todo in categorie.todos" v-bind:key="todo.id" class="list-group list-group-flush">
                        <li class="list-group-item">
                            {{ todo.name }}
                            <span @click="deleteTodo(todo.id)"  style="font-size: 14px; color: #FF3547;">
                                <i class="fas fa-trash-alt"></i>
                            </span>
                        </li>
                    </ul>
                </div>
        </section>
    </div>
</div>

添加
{{categorie.name}


{{todo.name}}

导出默认值{
数据（）{
返回{
类别：[]，
分类：{
id:“”，
名称：“”
},
类别id:“”，
待办事项：[]，
待办事项：{
id:“”，
名称：“”，
类别id:“”，
检查：“”
},
待办事项id:“”
}
},
创建（）{
this.fetchTodos（）；
this.fetchCategories（）；
},
方法：{
fetchTodos（）{
获取（'api/todos'）
.then（res=>res.json（））
。然后（res=>{
this.categories=res.data
})
},
fetchCategories（）{
获取（'api/类别'）
.then（res=>res.json（））
。然后（res=>{
this.categories=res.data
})
},
删除分类（id）{
如果（确认（'你确定吗？'））{
fetch（`api/categorie/${id}`{
方法：“删除”
})
.then（res=>res.json（））
。然后（数据=>{
this.fetchCategories（）
this.fetchTodos（）
})
.catch（err=>alert（err））
}
},
删除TODO（id）{
如果（确认（'你确定吗？'））{
fetch（`api/todo/${id}`{
方法：“删除”
})
.then（res=>res.json（））
。然后（数据=>{
this.fetchTodos（）
})
.catch（err=>alert（err））
}
},
addCategorie（）{
获取（'api/分类'{
方法：“post”，
正文：JSON.stringify（this.categorie），
标题：{
“内容类型”：“应用程序/json”
}
})
.then（res=>res.json（））
。然后（数据=>{
这个.clearForm（）；
this.fetchCategories（）；
this.fetchTodos（）；
})
.catch（err=>console.log（err））；
},
addTodo（分类号）{
//加
fetch（`api/todo/${categorie\u id}`{
方法：“post”，
正文：JSON.stringify（this.todo），
标题：{
“内容类型”：“应用程序/json”
}
})
.then（res=>res.json（））
。然后（数据=>{
这个.clearForm（）；
this.fetchTodos（）；
this.fetchCategories（）；
})
.catch（err=>console.log（err））；
},
clearForm（）{
this.todo.name=''；
this.categorie.name=''；
}
}
}

也许有人能帮我 非常感谢，祝你周末愉快

致以最良好的祝愿

---

Cyril

您的数据中应该有另一个属性用于输入字段，例如form:{name:'}，并将此属性用作输入的v-model v-model=“form.name”

最后，我找到了另一个解决方案 我从输入中获取值，并将参数传递给api url

守则：

在模板中输入：

<input  v-on:keyup.enter="addTodo(categorie.id)" type="text" class="form-control" v-bind:id="categorie.id" aria-describedby="name" placeholder="Add a todo">

以及清除输入的功能：

clearInput(categorie_id) {
            document.getElementById(categorie_id).value = '';
        }

致以最良好的祝愿

---

Cyril

your

v-model=“todo.name”

指的是您数据中的单个

todo.name

，因此它们当然都是相同的Hello Marian感谢您的回答，但我并不真正理解。如果我添加一个属性并在我的v模型中使用该属性，我会遇到同样的问题，并且数据没有保存在database@Cyril，仅在表单输入v模型中使用表单对象。然后在addCategorie正文中使用它，例如this.form.name，而不是this.categorie。

addTodo(categorie_id) {
            let val = document.getElementById(categorie_id).value
            fetch(`api/todo/${categorie_id}/${val}`, {
            method: 'post',
            body: JSON.stringify(this.todo),
            headers: {
                'content-type': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                this.clearInput(categorie_id);
                this.fetchTodos();
                this.fetchCategories();
            })
            .catch(err => console.log(err));
        },

clearInput(categorie_id) {
            document.getElementById(categorie_id).value = '';
        }