时间戳

首页 > 解决方案 > vuejs - 提交 axios 表单后显示警报和重定向

javascript - vuejs - 提交 axios 表单后显示警报和重定向

问题描述

我有一个工作正常并插入数据的表单，但是如果用户按下提交按钮 10 次，它会插入数据 10 次，所以我想将用户重定向到另一个页面并向他显示成功消息或错误。在这里我使用 axios，如下所示，我添加了 then 响应并捕获错误，但它没有显示我想我必须在 html 中显示一些如何：

reserve() {
            // this.form.post('../api/comment')
            axios.post('../api/reserve',{
                property_id:1,
                reserve_start:this.date,
                reserve_end:this.date2,
            }).then(response => {
                self.message = 'Data is entered'
            })
                .catch(error => {
                    self.message = 'Error'
                })

这是我的表单标记：

 <form @submit.prevent="reserve()"  id="myForm"  class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed">

标签： javascriptvue.jsaxios

解决方案

在 axios 调用之后重定向方法非常简单。

像这样的东西：

reserve() {
// this.form.post('../api/comment')
  axios.post('../api/reserve',{
    property_id:1,
    reserve_start:this.date,
    reserve_end:this.date2,
  }).then(response => {
    this.$router.push('/routeToGoTo')      
  })
}
.catch(error => {
  self.message = 'Error'
})

您可以在 router.push 之前发出警报，这将停止一切，直到它被关闭。所以警报会显示，用户点击确定，页面重定向。

alert("Something was done.")

推荐阅读