Я пытаюсь создать контактную форму в Vue.js и Php, но получаю ошибки, я не совсем уверен, как решить эту проблему

Я пытаюсь создать контактную форму в vue js и PHP, но она не работает, и я получаю ошибки. Я использовал интернет-источники для создания этой формы, просмотрел много руководств, я не уверен, как это решить. И я очень новичок в vuejs, любая помощь будет оценена

вот мой код

<script>
export default{
  data(){
    return{
    errorMessage: "",
    successMessage: "",
    errors: [],
    trx_no: "",
    name: "",
    country: "",
    email: "",
    mobile_no: "",
    myAddress: "",
    newUser: {trx_no: "", name: "", country: "", email: "", mobile: ""}
    }
  },
  mounted: function(){
    this.getAllUsers();
  },

  myAddress: function() {
    return this.$store.state.myAddress;
  },

  methods: {
    saveUser: function(){
      //console.info(this.newUser);
      var formData = this.toFormData(this.newUser);

      axios.post('http://localhost:8888/vue-and-php/public/api/update-info-form.php?action=update', formData, { crossdomain: true })
      .then((response) => {

        this.newUser = {trx_no: "", name: "", country: "", email: "", mobile: ""};

        if (response.data.error){
          this.errorMessage = response.data.message;
        }else{
          this.getAllUsers();
        }
        });
    },
    toFormData: function(obj){
      var form_data = new FormData();
      for(var key in obj){
        form_data.append(key, obj[key]);
      }
      return form_data;
    },
    clearMessage: function(){
      this.errorMessage = "";
      this.successMessage = "";
    },
    //validation
    checkForm: function (e) {
      this.errors = [];

      //if (!this.trx_no) {
      //  this.errors.push("TRX Address Required.");
      //}

      if (!this.name) {
        this.errors.push("Name Required.");
      }
      if (!this.country) {
        this.errors.push("Country Required.");
      }
      if (!this.email) {
        this.errors.push('Email Required.');
      } else if (!this.validEmail(this.email)) {
        this.errors.push('Valid Email Address Required.');
      }
      if (!this.mobile_no) {
        this.errors.push("Phone Number Required.");
      }

      if (!this.errors.length) {
        return true;
      }

      e.preventDefault();
    },

    validEmail: function (email) {
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }
  }
}
</script>

а это контактная форма

<template>
  <b-container>
    <div class = "update-info">
      <div class = "feature-text myinv-title">
        <h5 class = "title title-sm">Update your information</h5>
      </div>
      <form
        id = "app"
        @submit = "checkForm"
        method = "post"
        novalidate = "true"
        >

    <p v-if = "errors.length">
      <b>Please fill in all the fields</b>
      <ul>
        <li v-for = "error in errors" class = "alert alert-danger">{{ error }}</li>
      </ul>
    </p>

    <div class = "form-row">
      <div class = "form-group col-md-3">
        <label for = "trx">TRX Address No.</label>
        <input
          id = "trx"
          class = "form-control trx-address-nooverflow"
          v-model = "myAddress"
          type = "text"
          name = "TRX Address"
          readonly
        >
      </div>
      <div class = "form-group col-md-3">
        <label for = "name">Name</label>
        <input
          id = "name"
          class = "form-control"
          v-model = "name"
          type = "text"
          name = "name"
        >
      </div>
      <div class = "form-group col-md-3">
        <label for = "name">Country</label>
        <country-select
         id = "Country"
         class = "form-control"
         v-model = "country"
         :country = "country"
         topCountry = "US" />
      </div>
      <div class = "form-group col-md-3">
        <label for = "email">Email ID</label>
        <input
          id = "email"
          class = "form-control"
          v-model = "email"
          type = "email"
          name = "email"
        >
      </div>
    </div>
    <div class = "form-row">
      <div class = "form-group col-md-3">
        <label for = "email">Mobile No</label>
        <input
          id = "mobile"
          class = "form-control"
          v-model = "mobile_no"
          type = "text"
          name = "mobile"
        >
      </div>
      <div class = "form-group col-md-3">
        <div class = "top-30">
          <input type = "submit" value = "submit" class = "btn btn-btn btn-grad btn-submit" @click = "saveUser();"/>
        </div>
      </div>
       <div class = "clearfix"></div>
    </div>
    </form>
    </div>
  </b-container>
</template>

Заранее спасибо и #уважение

ПРИМЕЧАНИЕ. API работает нормально. Я тестировал его в Postman.

Будет полезно, если вы также опубликуете сообщение об ошибке.

Sagar Samal 27.04.2019 15:57

Эй, спасибо за вашу драгоценность, вот что я получаю [Vue warn]: Ошибка в смонтированном хуке: «TypeError: this.getAllUsers не является функцией»

Being MR.G 29.04.2019 06:43
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Валидация полей ввода для базовой формы React
Валидация полей ввода для базовой формы React
В одном из моих проектов MERN Stack есть форма с именем, фамилией, контактным номером, адресом, электронной почтой, датой рождения, номером NIC, весом...
Пользовательские правила валидации в Laravel
Пользовательские правила валидации в Laravel
Если вы хотите создать свое собственное правило валидации, Laravel предоставляет возможность сделать это. Создайте правило с помощью следующей...
0
2
575
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не знаю, какие ошибки вы получаете, но я вижу проблему с отправкой формы.

Некоторые изменения, которые я рекомендую:

Форма: <form id = "app" @submit = "saveUser" method = "post" novalidate = "true"> ... </form>

Кнопка: <input type = "submit" class = "btn btn-btn btn-grad btn-submit" />

Метод saveUser:

saveUser(event){
  event.preventDefault()

  this.checkForm()

  if (!this.errors.length) {
     var formData = this.toFormData(this.newUser);

      axios.post('http...')
      // rest of the code
  }
}

Не могу проверить, так как у меня нет проекта, но это должно помочь.


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

спасибо за рекомендуемые изменения и ваше время, но я также получаю эту ошибку -> [Vue warn]: ошибка в смонтированном хуке: «TypeError: this.getAllUsers не является функцией»

Being MR.G 29.04.2019 06:44

а затем, если я просто щелкну форму даже после внесения рекомендованных вами изменений, я получу эту ошибку -> [Vue warn]: Ошибка в обработчике v-on: «TypeError: Cannot read property 'preventDefault' of undefined», и я заполняю все поля, затем я снова нажимаю это, я получаю эту ошибку-> [Vue warn]: Ошибка в обработчике v-on: «ReferenceError: axios не определен»

Being MR.G 29.04.2019 07:36

Упомянутые вами ошибки говорят о том, что вы не импортировали то, на что жалуются ошибки. Что касается ошибки preventDefault, я на самом деле написал код из головы здесь, в браузере, скорее как направление, а не совсем как готовый копипаст.

Rudy 01.05.2019 14:20

Другие вопросы по теме