데이터가 성공적으로 저장되면 Vue에 표시되는 성공 메시지

Question

axios
            .우편(
              "/api/product/store",{
                   아이디: this.id
               })
            .then((res) => {
              var 변형 = "위험";;
              var icon = "XIcon";;
              var message = "그럼요";;
              if (res.data.error == 0) {
                var 변형 = "성공";
                var icon = "ArrowDownCircleIcon";;
                var 메시지 = res.data.message;
                window.location.reload();
              }
              this.$토스트({
                구성요소: ToastificationContent,
                소품: {
                  제목: 메시지,
                  아이콘: 아이콘,
                  변형: 변형,
                },
              });
            })
            .catch((오류) => {
            });

내 문제는 메시지가 표시될 때만 페이지를 로드하므로 페이지를 다시 로드하면 메시지가 손실된다는 것입니다. 이전 페이지를 다시 로드한 후 다음 메시지를 표시하는 방법이 있습니까? 감사해요.

Answer 1

페이지를 새로고침하면 무슨 의미가 있나요? 사용자 인터페이스에 업데이트된 데이터를 표시하려는 경우 Vue가 자동으로 이를 수행합니다. 따라서 이 작업을 수행할 필요가 없습니다.

또는 페이지 새로고침이 필수인 경우 루트 페이지에 툴팁을 배치하고 현재 하위 페이지에서 호출할 수 있습니다. 이 경우 페이지를 다시 로드하는지 여부에 관계없이 메시지가 표시됩니다.