vue js - 方法不改变数据

Question

我想知道是否有人可以解释为什么添加 axios 发布请求不会更新数据值。

外部 oauth2 身份验证成功后，代码获取用户对象并将 this.authd 更新为 true。 authd 用于 v-if 条件以显示 html 块，包括注销按钮。有用。并且在firefox中使用vue devtools，组件数据显示出我的预期。

单击此按钮然后调用一个发布到 /logout 的方法，如果发布有效，则将 this.authd 设置为 false。但是显示的 html 并没有改变，因为 authd 仍然是 true。哪个 vue devtools 显示。

所以我添加了另一个不调用 /logout 的按钮，它只是将 this.authd 设置为 false。这确实改变了数据（根据 vue devtools）并且 html 确实改变了。

这里是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>

还有 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)
            })
        }   
})

控制台的输出符合我的预期。

那么，我做错了什么？

Answer 1

this in logout function is not Vue instance 你应该使用箭头函数：

 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)
        })   
  },