在向我的 heroku 端点发出 POST 请求并将其保存到我的 mongoDB 后，数据仅在我刷新页面时显示

Question

我将我的 Vue 应用程序部署到 Netlify，并将后端部署到 heroku。一切正常，我可以编辑、删除和从我的数据库中获取数据，除非我提交表单（创建新客户端）并重定向到 this.$router.push("/tabela"); 。数据已创建，但是当我转到 ListComponent.vue（路径：'tabela'）时，我的数据不存在。它仅在我刷新页面时显示。在部署到 heroku 之前，我用 window.location.href="/tabela"; 而不是 this.$router.push 解决了这个问题，但是现在，如果我使用 window.location.href="/tabela" 我就不能再保存到我的数据库中了。我需要使用 this.$router.push 才能使其“工作”，但正如我所说，然后我需要刷新页面以使用新客户端更新我的 table。 这是我的应用 https://cadastro-app.netlify.app/ .

CreateComponent.vue

methods: {
            submitForm(){
               
                if(this.cliente.cpf === ''){
                    this.cliente.cpf = 'Não Informado'
                }else if(this.cliente.cnpj === ''){
                    this.cliente.cnpj = 'Não Informado'
                }

                axios.post('https://cadastro-backend-app.herokuapp.com/clientes', {
                    data: this.cliente
                }).then(function(){     
                    
                    this.cliente = {
                        nome: '',
                        sobrenome: '',
                        email: '',
                        telefone: '',
                        cnpj: '',
                        cpf: ''
                    }                 

                }).catch(function (error) {
                    console.log(error);
                });

                 /* window.location.href="/tabela"; */
                this.$router.push("/tabela"); 
                                 
            }
        }

ListComponent.vue

    <template>
    <div class="row">
        <div class="col-md-12 ">   
            
            <div class="search">
                <input @keyup.enter.prevent="search()" v-model='nomePesquisado' class="form-control mb-3" type="text"  placeholder="Pesquisar" aria-label="Search"/>
            </div>

            <table class="table table-striped">
                <thead class="thead-dark">
                    <tr>
                        <th>Nome completo</th>
                        <th>Email</th>
                        <th>telefone</th>
                        <th>CNPJ</th>
                        <th>CPF</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="cliente in clientes" :key="cliente._id">
                        <td>{{ cliente.nome }}</td>
                        <td>{{ cliente.email }}</td>
                        <td>{{ cliente.telefone }}</td>
                        <td>{{ cliente.cnpj }}</td>
                        <td>{{ cliente.cpf }}</td>
                        <td>
                            <router-link :to="{name: 'edit', params: { id: cliente._id }}" class="btn btn-success">Editar
                            </router-link>
                            <button @click.prevent="removerCliente(cliente._id)" class="btn btn-danger">Remover</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        data() {
            return {
                clientes: [],
                nomePesquisado:''
            }
        },
        created() {
            let apiURL = 'https://cadastro-backend-app.herokuapp.com/clientes/';
            axios.get(apiURL).then(res => {
                this.clientes = res.data;
                console.log(this.clientes);
            }).catch(error => {
                console.log(error)
            });
        },
        methods: {
            removerCliente(id){
                const apiURL = `https://cadastro-backend-app.herokuapp.com/clientes/${id}`;
                const indexOfArrayItem = this.clientes.findIndex(i => i._id === id);

                if (window.confirm("Tem certeza que deseja remover este item?")) {
                    axios.delete(apiURL).then(() => {
                        this.clientes.splice(indexOfArrayItem, 1);
                    }).catch(error => {
                        console.log(error)
                    });
                }
            },
            search(){
                this.$router.push(`results/${this.nomePesquisado}`);
            }
        }
    }
</script>

路由器index.js

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: () => import("../components/CreateComponent")
  },
  {
    path: "/tabela",
    name: "tabela",
    component: () => import("../components/ListComponent")
  },
  {
    path: "/edit/:id",
    name: "edit",
    component: () => import("../components/EditComponent")
  },
  {
    path: "/results/:id",
    name: "results",
    component: () => import("../components/Results")
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

Answer 1

您更改路线 (this.$router.push("/tabela");) 太早了

这是正在发生的事情：

1. 您提出 POST 请求
2. 无需等待请求完成，您就告诉 Vue 路由器切换到 ListComponent (this.$router.push("/tabela");)
3. 路由器激活ListComponent组件
4. ListComponent 在其 created 挂钩
中向服务器运行 GET 请求

结果是一场“比赛”。 POST 请求是否足够快以便 GET 请求看到新数据？

为了确定，将 this.$router.push("/tabela"); 移到 then

内