保存后如何在Laravel Vue中重新加载页面？

Question

在laravel和vue.js中保存后，我试图重新加载页面，我在“ fetchGoals”中执行了此操作。这是我尝试过的方法，它第一次起作用，它保存了目标并刷新了页面。当我尝试添加另一个目标时，“保存”按钮将不再起作用，并且页面也不会刷新。编辑按钮也是如此，它将在第一次运行，然后在第二次将不运行。无论是保存还是编辑，都存在相同的问题，我只能在页面刷新时执行一项功能。有什么想法我做错了吗？

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <form @submit.prevent="addGoal" class="mb-3">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Goal" v-model="goal.title">
                            </div>
                            <div class="form-group">
                            <textarea class="form-control" placeholder="Description" v-model="goal.description">

                            </textarea>
                            </div>
                            <button type="submit" class="btn btn-primary btn-block">Add New Goal</button>
                        </form>
                        <button @click="clearForm()" class="btn btn-danger btn-block">Cancel</button>
                        <div class="panel-body">

                            <table class="table">
                                <thead>
                                <tr>
                                    <th scope="col">id</th>
                                    <th scope="col">Title</th>
                                    <th scope="col">Description</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="goal in goals" v-bind:key="goal.id">
                                    <td>{{goal.id}}</td>
                                    <td>{{goal.title}}</td>
                                    <td>{{goal.description}}</td>
                                    <td>
                                        <button @click="editGoal(goal)" class="btn btn-warning btn-xs">Edit</button>
                                    </td>
                                    <td>
                                        <button @click="deleteGoal(goal.id)" class="btn btn-danger btn-xs">Delete
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li v-bind:class="[{disabled: !pagination.prev_page_url}]" class="page-item">
                                        <a class="page-link" href="#" @click="fetchGoals(pagination.prev_page_url)">Previous</a>
                                    </li>

                                    <li class="page-item disabled">
                                        <a class="page-link text-dark" href="#">Page {{ pagination.current_page }} of {{
                                            pagination.last_page }}</a>
                                    </li>

                                    <li v-bind:class="[{disabled: !pagination.next_page_url}]" class="page-item">
                                        <a class="page-link" href="#"
                                           @click="fetchGoals(pagination.next_page_url)">Next</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                goals: [],
                goal: {
                    id: '',
                    title: '',
                    description: '',
                    user_id: 1,
                },
                goal_id: '',
                pagination: {},
                edit: false
            };
        },

        created() {
            this.fetchGoals();
        },

        methods: {
            //gets the data and the pagination
            fetchGoals(page_url) {
                let vm = this;
                page_url = page_url || '/api/goals';

                fetch(page_url)
                    .then(res => res.json())
                    .then(res => {
                        this.goals = res.data;
                        //this comes from res and res is the data from the Jason
                        vm.makePagination(res.meta, res.links);
                    })
                    .catch(err => console.log(err));
            },

            addGoal() {
                if (this.edit === false) {
                    // Add
                    fetch(`/api/goal`, {
                        method: 'post',
                        body: JSON.stringify(this.goal),
                        headers: {
                            'content-type': 'application/json',
                        }
                    })
                        .then(res => res.json())
                        .then(data => {
                            this.clearForm();
                            alert('Article Added');
                            this.fetchGoals();
                        })
                        .catch(err => console.log(err));
                } else {
                    //Edit save
                    fetch(`/api/goal`, {
                        method: 'put',
                        body: JSON.stringify(this.goal),
                        headers: {
                            'content-type': 'application/json',
                        }
                    })
                        .then(res => res.json())
                        .then(data => {
                            this.clearForm();
                            alert('Article Added');
                            this.fetchGoals();
                        })
                        .catch(err => console.log(err));
                }
            },
            editGoal(goal) {
                this.edit = true;
                this.goal.id = goal.id;
                this.goal.goal_id = goal.id;
                this.goal.title = goal.title;
                this.goal.description = goal.description;
            },
            clearForm() {
                this.edit = false;
                this.goal.id = null;
                this.goal.goal_id = null;
                this.goal.title = '';
                this.goal.description = '';
                this.goal.user_id = null;
            }
        }
    };

</script>

Answer 1

您可以使用传统的JavaScript解决问题

// Reload the current page
window.location.reload();

使用window.location.reload(true);强制重新加载（忽略浏览器缓存）