POST api VUEJS 后重新加载组件

如何解决POST api VUEJS 后重新加载组件

我在使用 NUXTJS 重新加载我的应用 VueJS 中的组件时遇到问题。我的应用中有一个页面，该页面称为“CustomerCard”组件。

我使用 fetch 与我的 API 对话并拥有我的所有客户。当我到达此页面时，它运行良好。

我有一个带表单的模态，当我通过这个模态添加客户时，该客户会记录在我的数据库中。它有效，但是当模态关闭时，我不知道如何重新渲染组件......（当我点击导航时，它也不起作用）

<template>
  <div >
    <a-button type="primary" @click="showModal">
      Add a customer
    </a-button>
    <a-modal
      title="Name :"
      :visible="visible"
      :confirm-loading="confirmloading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div>
        <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" >
          <a-form-item >
            <a-input
              v-decorator="['note',{ rules: [{ required: true,message: 'Entrer le nom du client!' }] }]"
              v-model="newcustomer"
            />
          </a-form-item>
        </a-form>
      </div>

    </a-modal>
    <CustomerCard v-bind:array-customers="customer" ></CustomerCard>
  </div>
</template>

javascript：


export default {
  components: {CustomerCard},layout: "dashboard",name: "DashboardHome",middleware: 'authenticated',//display page only for connected users

  data() {
    return {
      customer: [],visible: false,confirmloading: false,newcustomer:"",}
  },created() {
    this.getAllCustomers();
  },methods: {

    showModal() {
      this.visible = true;
    },//when click on OK button,record the customer in api
    handleOk(e) {
      this.confirmloading = true;
      axios
      .post('http://127.0.0.1:8000/api/customers',{
        name : this.newcustomer
      });
      setTimeout(() => {
        this.visible = false;
        this.confirmloading = false;
      },1000);
    },//click cancel button
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },//get all customers in api
    getAllCustomers() {
      axios.get('http://127.0.0.1:8000/api/customers')
        .then((res)=>{
          console.log(res.data['hydra:member'])
          this.customer = res.data['hydra:member']
          //this.totalStudies()
        }).catch(err=>console.log(err))
    }

那么，当我发布客户时，如何重新加载组件 CustomerCard 呢？非常感谢帮助

解决方法

您可以在 getAllCustomers() 的 then 回调中调用 axios.post()，这将使用数据库中的最新数据刷新 customer：

axios.post(...).then(() => this.getAllCustomers())