Формирует оповещения с помощью Vue и Sweetalert не регистрирует Vue Store? - PullRequest
Новая
       16

Формирует оповещения с помощью Vue и Sweetalert не регистрирует Vue Store?

0 голосов
/ 27 июня 2019

У меня есть простая форма входа в систему с кнопкой, которая имеет реактивный текст {{ msg }}, по умолчанию она говорит log in, и когда пользователь отправляет форму, она меняется на logging....Если форма не удалась, я хочу сказать send again.

Я использую Sweetalert для предупреждений и намереваюсь изменить данные msg внутри sweetAlert.Однако по какой-то причине он возвращает undefined в this.msg

html 

<form id="login_form">
 <input class="form-control" type="text" required="" name="email" placeholder="Email">
 <input class="form-control" type="password" required="" name="password" placeholder="Password">
 <button class="btn" type="submit">Log In</button>
</form>

Javascript 

export default {
 data() {
   return {
     msg: "Log in"
    }
  },
methods: {
submitForm() {
  const loginData = $("#login_form").serializeArray();
  const v = this;
  this.msg = "logging..."
  $.ajax({
    url: "/authentication",
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    data: JSON.stringify({
      strategy: "local",
      email: loginData[0].value,
      password: loginData[1].value
    }),
    success: function (data) {
      window.location.replace("/");
       this.msg = "logged!"
    },
    error: function (error) {
      if (error.status === 401) {
        swal("Wrong email or password");
        this.msg = "Try again?";
        console.log("this.msg) //returns undefined
      } else if (error.status === 400) {
        swal("Wrong email or password");
        this.msg = "Try again?";
      } else {
        swal("Error. Try again!");
        this.msg = "Try again?";
      }
    }
  });
}
}

Я также пробовал обещания, но он также возвращает this.msg как неопределенное.

если я console.log(this.msg) внутри sweetAlert, он возвращает неопределенное значение.

1 Ответ

1 голос
/ 27 июня 2019

Я сомневаюсь в его контекстном поведении. Попробуйте это 

export default {
 data() {
   return {
     msg: "Log in"
    }
  },
methods: {
submitForm() {
  const self = this;
  const loginData = $("#login_form").serializeArray();
  const v = this;

  self.msg = "logging..."
  $.ajax({
    url: "/authentication",
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    data: JSON.stringify({
      strategy: "local",
      email: loginData[0].value,
      password: loginData[1].value
    }),
    success: function (data) {
      window.location.replace("/");
       self.msg = "logged!"
    },
    error: function (error) {
      if (error.status === 401) {
        swal("Wrong email or password");
        self.msg = "Try again?";
        console.log(self.msg) //returns undefined
      } else if (error.status === 400) {
        swal("Wrong email or password");
        self.msg = "Try again?";
      } else {
        swal("Error. Try again!");
        self.msg = "Try again?";
      }
    }
  });
}
}
...