Показать предупреждение о начальной загрузке с условием (Vue.js): как я могу получить доступ к этой переменной, чтобы изменить ее значение? - PullRequest
Новая
       18

Показать предупреждение о начальной загрузке с условием (Vue.js): как я могу получить доступ к этой переменной, чтобы изменить ее значение?

0 голосов
/ 17 января 2019

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

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

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-6 mt-5 mx-auto">
        <form v-on:submit.prevent="register">
          <h1 class="h3 mb-3 font-weight-normal">Register</h1>
          <div class="form-group">
            <label for="username">Username</label>
            <input
              type="text"
              v-model="username"
              class="form-control"
              name="username"
              placeholder="Please choose your username"
            >
          </div>
          <div class="form-group">
            <label for="email">Email Address</label>
            <input
              type="email"
              v-model="email"
              class="form-control"
              name="email"
              placeholder="Please enter your email address"
            >
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input
              type="password"
              v-model="password"
              class="form-control"
              name="password"
              placeholder="Please choose your password"
            >
          </div>
          <button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>
        </form>
        <div>
          <b-alert variant="success" show>Example alert</b-alert>
        </div>
        <div>
          <b-alert variant="danger" :show="showAlert">Example Alert!</b-alert>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import router from "../router";

export default {
  data() {
    return {
      username: "",
      email: "",
      password: "",
      showAlert: false        };
  },
  methods: {
    register() {
      axios
        .post("/user/register", {
          username: this.username,
          email: this.email,
          password: this.password
        })
        .then(res => {
          if (!res.data.username) {
            // show an alert, I would like to do something similar to "showAlert = true;"
          } else {
            // redirect to login
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
@import "../assets/css/reglog.css";
@import "../assets/css/modal.css";
</style>

Однако я не уверен, как получить доступ к переменной showAlert и как изменить ее значение в операторе if. Единственное, что я знаю здесь, это то, что если я вручную изменил showAlert в коде (строка 9, считая от тега script) с false на true, страница отреагирует и покажет предупреждение, когда захочет.

Извините, если вам нужна дополнительная информация или если что-то неясно, я немного устал и застрял на этом несколько часов, не собираюсь лгать.

1 Ответ

0 голосов
/ 17 января 2019

Вы можете получить доступ к переменной showAlert следующим образом: this.showAlert = true

.then(res => {
  if (!res.data.username) {
    this.showAlert = true;   // update showAlert
   } else {
    // redirect to login
   }
})
...