vue js - method does not change data

Question

I wonder if someone can explain why adding an axios post request will not update a data value.

After a successful external oauth2 authentication, the code gets the user object and updates this.authd to true. authd is used in a v-if condition to display a block of html, including a logout button. It works. And using vue devtools in firefox, the component data shows what I expect.

Clicking this button then calls a method which posts to /logout and sets this.authd to false if the post works. But the html displayed does not change because authd is still true. Which vue devtools show.

So I added another button that does not call /logout, it just sets this.authd to false. And that does change the data (according to vue devtools) and the html does change.

Here is the html

  <div id="app-3" class="container">
     <template v-if="!authd">
        <a href = "/login">Click here to Github Login</a>
     </template>
     <template v-else>
         Logged in as: <span id="user">{{ user }}</span>
         <div>
             <button v-on:click="logout" class="btn btn-primary">Logout</button>
         </div>
         <div>
           <button v-on:click="otherLogout" class="btn btn-primary"> Special Logout</button>
        </div>
     </template>
  </div>

And the javascript

    vm = new Vue({
        el: '#app-3',
        data: function() {
          return {
            user: null,
            baseurl: "http://mint191:9080/",
            authd: false
          }
        },
        methods: {
          logout: function () {
            axios({
              method: 'post',
              url: 'logout',
              baseURL: this.baseurl
            })
              .then(function(response) {
                  console.log(`post logout: ${JSON.stringify(response)}`)
                  this.user = null
                  this.authd = !this.authd
                  console.log(`logout: authorised is ${this.authd}`)
                  console.log(`logout: user is ${this.user}`)       
                })    
                .catch(function (error) {
                  console.log("logout has gone wrong" + error)
                })   
          },
          otherLogout: function () {
                  this.user = null
                  this.authd = !this.authd
                  console.log(`other logout: authorised is ${this.authd}`)
                  console.log(`other logout: user is ${this.user}`)       
          }
        },
        mounted () {
          axios({
            method: 'get',
            url: 'user',
            baseURL: this.baseurl
          })
            .then(response => {
              console.log(`get user: ${JSON.stringify(response)}`)
              this.user = response.data.userAuthentication.details.login
              this.authd = !this.authd
              console.log(`authorised is ${this.authd}`)
            })
            .catch(function (error) {
              console.log("nothing in user" + error)
            })
        }   
})

The output in the console is what I expected.

So, what am I doing wrong?

score 0 · Accepted Answer · answered Jul 26 '19 at 06:58

this in logout function is not Vue instance You should use arrow function for that:

 logout: function () {
    axios({
      method: 'post',
      url: 'logout',
      baseURL: this.baseurl
    })
      .then(response => {
          console.log(`post logout: ${JSON.stringify(response)}`)
          this.user = null
          this.authd = !this.authd
          console.log(`logout: authorised is ${this.authd}`)
          console.log(`logout: user is ${this.user}`)       
        })    
        .catch(function (error) {
          console.log("logout has gone wrong" + error)
        })   
  },

The answer here has a more elaborate answer: [link] (https://stackoverflow.com/questions/40996344/axios-cant-set-data/41654266#41654266) and an alternative ( .bind(this) ) if do not want to use an arrow function — Alphons, Oct 28 '19 at 14:35

vue js - method does not change data

1 Answers1