javascript - 显示带条件的 Bootstrap 警报 (Vue.js) : how can I access this variable in order to change its value?

Question

首先，如果我的问题的答案很明显，我想道歉，但是由于我对 Vue.js 还是很陌生，我真的被困在这里，我需要帮助。

我有一个身份验证系统，如果用户想在不输入用户名的情况下注册，我想显示一个 Bootstrap 警报。代码现在看起来像这样:

<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 语句中更改它的值。我在这里唯一知道的是，如果我在代码(从脚本标记开始计算的第 9 行)中手动将 showAlert 从 false 更改为 true，页面会使用react并在需要时显示警报。

如果您需要更多信息或者有什么不清楚的地方，我很抱歉，我有点累了，坚持了几个小时，我不会撒谎。

Answer 1

您可以访问 showAlert 变量如下:this.showAlert = true

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