更新反应性属性时，Vuetify v-alert 不显示

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基于 status 的计算属性：

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

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)

    }
  }
})