Data is not updated in Vue component when emit calls function-CodePudding

Note: when I upload small size image then the data refreshes and if the image is bigger like 1 mb then it doesn't refresh the data.

I have a add new product modal and when I open it as below:

<NewProduct v-if="showNewProduct" @close-modal="showNewProductModal" @success="showSuccessAlert"/>

and when I add the product and the modal is closed by emitting as below:

Products.addProduct(form)        
.then(
this.$emit("closeModal"),
this.$emit("success"),
)

Then in the parent component the data is not refreshed and show the old data and if I refresh the page then it show the new data.

I get data as below in parent component:

data: function () {
    return {
    showNewProduct: false,
    productList: [],
    success: false,
    };
},

mounted() {
    this.getProductList();
},

methods:{
    showSuccessAlert() {
        this.getProductList(),
        this.success = !this.success,     
    },

    showNewProductModal() {
      this.showNewProduct = !this.showNewProduct;
    },

    getProductList() {
        User.getProductList()
        .then((response) => {
        this.productList = response.data;        
        });
    },
}

My goal is that when the modal is closed then the productList should be updated as well with the newly added data without page refresh.

Add product API.

  addProduct(form) {
    return Api().post("/addProduct", form);
  },

CodePudding user response：

It is something related to asynchronous processing. Please, make sure you start fetching record only after the upload is completed.

Products.addProduct(form).then(() => { this.$emit("closeModal")} )


showNewProductModal() { this.getProductList()}

CodePudding user response：

Products.addProduct(form).then(({data: product}) => {
    //pass data to close model event
    this.$emit("closeModal", product),
    this.$emit("success"),
  }

showNewProductModal(product) {
      this.productList.push(product);
      this.showNewProduct = !this.showNewProduct;
    }