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

Question

我有一个工作正常并插入数据的表单，但是如果用户按下提交按钮 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">

Answer 1

在 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.")