I want to conditionally render a v-alert if the login response code equals 401 Unauthorized. I have the alert defined below:

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

In the data section of my ponent, I define the property show which is by default set to false to not show the v-alert:

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

In the methods section of my ponent, I attempt user authentication and if the status code equals 401, I update 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;
        }
      });
    }
  }

I would have thought this to work as show is reactive since it's defined in the data() section of my ponent.

Any idea what I can do to get this conditionally rendering properly?

Many thanks in advance,
Chappie Johnson

I want to conditionally render a v-alert if the login response code equals 401 Unauthorized. I have the alert defined below:

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

In the data section of my ponent, I define the property show which is by default set to false to not show the v-alert:

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

In the methods section of my ponent, I attempt user authentication and if the status code equals 401, I update 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;
        }
      });
    }
  }

I would have thought this to work as show is reactive since it's defined in the data() section of my ponent.

Any idea what I can do to get this conditionally rendering properly?

Many thanks in advance,
Chappie Johnson

• javascript
• html
• vue.js
• vuejs2
• vuetify.js

• please share how do you're calling login method – Boussadjra Brahim Commented Aug 24, 2019 at 22:29
• i am calling the login method from the methods section. – Joe B. Commented Aug 24, 2019 at 22:33
• please show how you're calling it like this.login() or @click="login" – Boussadjra Brahim Commented Aug 24, 2019 at 22:36
• I am doing @click="login" – Joe B. Commented Aug 24, 2019 at 22:37
• try this.$forceUpdate(); after this.show = true; – Boussadjra Brahim Commented Aug 24, 2019 at 22:42

1 Answer 1

Try to remove the this keyword from template :

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

if this doesn't work try a show puted property based on status :

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

    }
  }
})

<script src="https://cdn.jsdelivr/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr/npm/[email protected]/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>