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

Для вывода сообщения об успешной отправке формы в Vue.js можно использовать несколько подходов, в зависимости от того, какая архитектура приложения используется. Рассмотрим два распространенных подхода.

Первый подход - использование переменной состояния. В этом случае мы создаем переменную в объекте состояния Vue, которая отражает состояние отправки формы. По умолчанию переменная будет false, а после успешной отправки формы мы поменяем значение на true и отобразим сообщение пользователю.

// В компоненте Vue
data() {
  return {
    formSubmitted: false
  }
},
methods: {
  submitForm() {
    // Здесь происходит отправка формы
    // После успешной отправки меняем значение переменной
    this.formSubmitted = true;
  }
}

// В шаблоне компонента
<div v-if="formSubmitted">
  <p>Форма успешно отправлена!</p>
</div>

Второй подход - использование событий. В этом случае мы создаем пользовательское событие, которое будет вызываться после успешной отправки формы. Компонент, содержащий форму, будет отслеживать это событие и выводить сообщение.

// В компоненте Vue, содержащем форму
methods: {
  submitForm() {
    // Здесь происходит отправка формы
    // После успешной отправки вызываем событие
    this.$emit('formSubmitted');
  }
}

// В компоненте, отображающем сообщение
<my-form @formSubmitted="showSuccessMessage"></my-form>
<div v-if="formSubmitted">
  <p>Форма успешно отправлена!</p>
</div>

Результат будет аналогичным для обоих подходов: при успешной отправке формы отобразится сообщение о успешной отправке. Вы можете выбрать подход, который лучше подходит для вашего конкретного случая и архитектуры приложения.