javascript - Vuetify v-alert 在 react 属性更新时不显示

Question

如果登录响应代码等于 401 Unauthorized，我想有条件地呈现 v-alert。我在下面定义了警报:

<v-alert v-if="this.show" type="error">Invalid email and/or password.</v-alert>

在我的组件的数据部分，我定义了属性 show，默认设置为 false 以不显示 v-alert:

export default {
  name: "logincomponent",
  data() {
    return {
      user: {},
      show: false,
    };
  },

在我的组件的方法部分，我尝试用户身份验证，如果状态代码等于 401，我更新 this.show = true:

methods: {
    login: function() {
      let user = {
        email: this.user.email,
        password: this.user.password
      };
      authService.login(user).then(auth => {
        if (auth.response.status === 401) {
          this.show = true;
        }
      });
    }
  }

我原以为这是有效的，因为 show 是响应式的，因为它是在我组件的 data() 部分中定义的。

知道我可以做些什么来正确地进行这种有条件的渲染吗？

非常感谢，
查皮·约翰逊

Answer 1

尝试从模板中删除 this 关键字:

 <v-alert v-if="show" type="error">Invalid email and/or password.</v-alert>

如果这不起作用，请尝试基于状态的show 计算属性:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      status: null
    }
  },
  computed: {
    show() {
      return this.status === 401;
    }
  },
  methods: {
    login: function() {
      setTimeout(() => {
        this.status = 401;
        console.log(this.show)
      }, 3000)

    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app" data-app>
  <v-btn small color="primary" @click="login">Login</v-btn>
  <v-alert v-if="show" type="error" >
    Invalid email and/or password
  </v-alert>
</div>