vuejs - показывать предупреждение и перенаправление после отправки формы axios

Question

У меня есть форма, которая работает нормально и вставляет данные, но если пользователь нажимает кнопку отправки 10 раз, он вставляет данные 10 раз, поэтому я хочу перенаправить пользователя на другую страницу и показать ему сообщение об успехе или ошибку. здесь я использую Axios, как показано ниже, я добавил тогда resoponse и перехватить ошибку, но она не отображается, я думаю, что я должен показать в 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.")