POST api VUEJS 后重新加载组件

Question

我在使用 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 ？ 非常感谢您的帮助

Answer 1

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

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