带有 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&nbsp; 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) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let val = document.getElementById(categorie_id).value&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fetch(`api/todo/${categorie_id}/${val}`, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: 'post',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body: JSON.stringify(this.todo),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'content-type': 'application/json'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(res => res.json())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(data => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.clearInput(categorie_id);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.fetchTodos();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.fetchCategories();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch(err => console.log(err));&nbsp; &nbsp; &nbsp; &nbsp; },以及清除输入的功能：clearInput(categorie_id) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(categorie_id).value = '';&nbsp; &nbsp; &nbsp; &nbsp; }

Answer 2

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