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

Question

我用 Laravel 和 Vue.js 制作了一个 todolist：我可以添加一个类别，我可以为每个类别添加一个 todos 列表。对于每个类别列表，都有一个为该类别添加新待办事项的输入。我用一个组件制作了所有东西。我用 Laravel 创建了 api。一切都很完美。唯一的问题是：当我在输入“添加待办事项”中写一些东西时，它也会写在其他输入中。这是合乎逻辑的，因为输入标签中有 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>                    </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>

Answer 1

最后，我找到了另一个解决方案，我从输入中获取值并将参数传递给 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">

函数：addTodo()

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 = '';

        }

Answer 2

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