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>

Vuetify v-警报未显示何时更新反应性

1 个答案: