有没有办法在不刷新页面的情况下动态更新我的组件？

Question

我有一个 vue 组件来构建卡片，并且在该组件中是另一个组件，我使用道具将数据传递给我目前使用 Swal 作为弹出窗口将新项目添加到数据库中，但是当它完成添加时我必须刷新页面才能看到数据。我想使用 vue 的全部原因是不必刷新页面即可查看更新的数据，而我一直无法弄清楚。

这是我的 Projects.vue

   import ProjectItem from './Projects/ProjectItem.vue';
    export default {
        name: "Projects",
        components: {
            ProjectItem
        },
    data() {
            return {
                    projects: []
                }
        },
        methods: {
            getProjects () {
                axios.get('/api/projects').then((res) => {this.projects = res.data});
            },
            addProject() {
                Swal.queue([{
                title: 'Add a New Project?',
                html:
                    '<label for="name" style="color: #000;font-weight: 700">Project Name<input id="name" class="swal2-input"></label>' +
                    '<label for="description" style="color: #000;font-weight: 700">Project Description<textarea id="description" rows="5" cols="15" class="swal2-input"></textarea></label>',
                showCancelButton: true,
                confirmButtonText: 'Create Project',
                showLoaderOnConfirm: true,
                preConfirm: (result) => {
                    return new Promise(function(resolve, reject) {
                        if (result) {
                            let name = $('#name').val();
                            let desc = $('#description').val();
                            axios.post('/api/projects', {title:name,description:desc})
                            .then(function(response){
                                Swal.insertQueueStep({
                                type: 'success',
                                title: 'Your project has been created!'
                                })
                                resolve();
                            })
                            .catch(function(error){
                                Swal.insertQueueStep({
                                type: 'error',
                                title: 'Something went wrong.'
                                })
                                console.log(error);
                                reject();
                            })
                        }
                    });
                }
                }])
            }
        },
        mounted () {
            this.getProjects();
        }

我将它绑定到我的 Project.vue 模板中的 ProjectItem：

            <div class="table-responsive border-top">
                <table class="table card-table table-striped table-vcenter text-nowrap">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Project Name</th>
                            <th>Team</th>
                            <th>Date</th>
                            <th>Preview</th>
                        </tr>
                    </thead>
                        <project-item v-bind:projects="projects" />
                </table>

这是我的 ProjectItem.vue：

<template>
    <tbody>
        <tr v-for="project in projects" :key="project.id">
            <td>{{ project.id }}</td>
            <td>{{ project.title }}</td>
            <td><div class="avatar-list avatar-list-stacked">
                    {{ project.description }}
                </div>
            </td>
            <td class="text-nowrap">{{ project.updated_at }}</td>
            <td class="w-1"><a href="#" class="icon"><i class="fa fa-eye"></i></a></td>
        </tr>
    </tbody>    
</template>
<script>
export default {
    name: "ProjectItem",
    props: ["projects"],
}
</script>

Answer 1

您必须将最近添加的项目插入到 products 数组中。

如果您能够更改后端代码，则可以更改响应以包含项目。

this.projects.push(response.project);