Как вывести сообщение об успешной отправке формы?

Question

[stanislavkm]

Каким образом можно реализовать вывод уведомления после успешной отправки данных формы?
Подскажите способ, пожалуйста!
Есть такая идея (но нерабочая. даже при неуспешной отправке выводит 'Удачно отправлено' ):

<Form class="order_form" @submit.prevent=""> 
              <div>
                <Field v-model="fio" class="order_input" type="text" placeholder="Имя" name="first_name" :rules="[isRequired, validateName]"/>
              </div>
                <ErrorMessage class="errMessage" name="first_name" />             
              <div>
                <Field v-model="phone" class="order_input" type="text" placeholder="Телефон" name="phone" :rules="isRequired" />
              </div>
                <ErrorMessage class="errMessage" name="phone" />
...
              <button class="make_order" @click="postOrder">Отправить заказ</button>
            </Form>
            <span>{{successMessage}}</span>

data() {
    return {
        successMessage: '',
    }
  },

postOrder() {
      const order_descriptionStr = this.itemDesc;
      const order_description = JSON.stringify(order_descriptionStr);
      const orderDataStr = {fio: this.fio, phone: this.phone, ...}
      axios.post(`${url}`, orderDataStr)
          .then((response) => {
            console.log(response.data);
            this.successMessage = 'Удачно отправлено!';
          })
          .catch((error) => {
            console.log(error);
          });
    },

Comments

[Антон Антон]

а где сама отправка? ты отключаешь стандартный обработчик, так что данные надо самому отправлять через fetch или axios

[stanislavkm]

Антон Антон,

postOrder() {
      const orderData = {fio: this.fio, phone: this.phone ...}
      axios.post(`https://lm.perimeter.games/api/v1/order`, orderData)
          .then((response) => {
            console.log(response.data);
          })
          .catch((error) => {
            console.log(error);
          });
    },

[Антон Антон]

stanislavkm, ну перенеси это в onsubmit просто. а кнопку сделай сабмитом. или вывод сообщения перенеси в postOrder.

[stanislavkm]

Антон Антон,
обновил вопрос, можете подсказать, пожалуйста

Answer 1

[stanislavkm]

Если кому надо, получилось решить вопрос, используя response.data.success, таким образом:

postOrder() {
      const orderDataStr = {fio: this.fio, phone: this.phone ...}
      axios.post(`${url}`, orderDataStr)
          .then((response) => {
            console.log(response);
            if (!response.data.success){
              this.successMessage = 'Данные не были отправлены! Проверьте заполненные данные!';
            }
            else {
              this.successMessage = 'Данные успешно отправлены!';
            }
          })
          .catch((error) => {
            console.log(error);
          });
    },