Mesej kejayaan dipaparkan dalam Vue apabila data berjaya disimpan

Question

axios
            .post(
              "/api/product/store",{
                   id: this.id
               })
            .then((res) => {
              varian var = "bahaya";
              ikon var = "XIcon";
              var message = "Thất bại";
              if (res.data.error == 0) {
                var varian = "kejayaan";
                var icon = "ArrowDownCircleIcon";
                var mesej = res.data.message;
                window.location.reload();
              }
              ini.$toast({
                komponen: ToastificationContent,
                alat peraga: {
                  tajuk: mesej,
                  ikon: ikon,
                  varian: varian,
                },
              });
            })
            .catch((error) => {
            });

Masalah saya ialah: ia hanya memuatkan halaman apabila mesej dipaparkan, jadi apabila halaman dimuat semula ia kehilangan mesej. Adakah terdapat cara untuk memuat semula halaman sebelumnya dan kemudian memaparkan mesej berikut? terima kasih.

Answer 1

Apa gunanya memuatkan semula halaman? Jika anda ingin memaparkan data yang dikemas kini pada antara muka pengguna, Vue akan melakukannya untuk anda secara automatik. Jadi anda tidak perlu melakukan ini.

Sebagai alternatif, jika muat semula halaman adalah satu kemestian untuk anda, anda boleh meletakkan petua alat pada halaman akar dan memanggilnya dari subhalaman semasa. Dalam kes ini, mesej akan dipaparkan tidak kira sama ada anda memuatkan semula halaman tersebut.