Есть ли способ обновить мой компонент динамически, не обновляя страницу?

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();
        }

Я привязываю его к ProjectItem в моем шаблоне Project.vue:

            <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);