javascript - 带有 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>
                        <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>

<script>
export default {
    data() {
        return {
            categories: [],
            categorie: {
                id: '',
                name: ''
            },
            categorie_id: '',
            todos: [],
            todo: {
                id: '',
                name: '',
                categorie_id: '',
                check: ''
            },
            todo_id: ''
        }
    },

    created() {
        this.fetchTodos();
        this.fetchCategories();
    },

    methods: {
        fetchTodos() {
            fetch('api/todos')
            .then(res => res.json())
            .then(res => {
                this.categories = res.data
            })
        },
        fetchCategories() {
            fetch('api/categories')
            .then(res => res.json())
            .then(res => {
                this.categories = res.data
            })
        },
        deleteCategorie(id) {
           if (confirm('Are you sure ?')) {
                fetch(`api/categorie/${id}`, {
                    method: 'delete'
                })
                .then(res => res.json())
                .then(data => {
                    this.fetchCategories()
                    this.fetchTodos()
                })
                .catch(err => alert(err))
           }
        },
        deleteTodo(id) {
           if (confirm('Are you sure ?')) {
                fetch(`api/todo/${id}`, {
                    method: 'delete'
                })
                .then(res => res.json())
                .then(data => {
                    this.fetchTodos()
                })
                .catch(err => alert(err))
           }
        },
        addCategorie() {
            fetch('api/categorie', {
            method: 'post',
            body: JSON.stringify(this.categorie),
            headers: {
                'content-type': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                this.clearForm();
                this.fetchCategories();
                this.fetchTodos();
            })
            .catch(err => console.log(err));
        },
        addTodo(categorie_id) {
            // Add
            fetch(`api/todo/${categorie_id}`, {
            method: 'post',
            body: JSON.stringify(this.todo),
            headers: {
                'content-type': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                this.clearForm();
                this.fetchTodos();
                this.fetchCategories();
            })
            .catch(err => console.log(err));
        },
        clearForm() {
            this.todo.name = '';
            this.categorie.name = '';
        }
    }
}

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

此致，

西里尔

标签： javascriptlaravelvue.js

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

此致，

西里尔