Success message displayed in Vue when data is saved successfully

Question

axios
            .post(
              "/api/product/store",{
                   id: this.id
               })
            .then((res) => {
              var variant = "danger";
              var icon = "XIcon";
              var message = "Thất bại";
              if (res.data.error == 0) {
                var variant = "success";
                var icon = "ArrowDownCircleIcon";
                var message = res.data.message;
                window.location.reload();
              }
              this.$toast({
                component: ToastificationContent,
                props: {
                  title: message,
                  icon: icon,
                  variant: variant,
                },
              });
            })
            .catch((error) => {
            });

My problem is: it only loads the page when the message is displayed, so when the page reloads it loses the message. Is there a way to reload the previous page and then display the following message? Thanks.

Answer 1

What’s the point of reloading the page? If you want to display updated data on the user interface, Vue will do it for you automatically. So you don't need to do this.

Alternatively, if page reloading is necessary for you, you can put the prompt message on the root page and call it from the current subpage. In this case, the message will be displayed regardless of whether you reload the page.