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

注销功能中的

import aaa reload(aaa)不是Vue实例，您应该使用箭头功能：

import React from 'react'
import DatePicker from 'react-native-datepicker'
import 'moment/locale/he'

export default class ScheduleDatePicker extends React.Component {
state={
 date:''
}
  render () {
    var locale = 'he'
    return (
      <DatePicker
        mode='date'
        format='LLLL'
        locale={locale}
        showIcon={true}
        style={{width: 300, marginHorizonhel: 5}}
        date={new Date()}


        onDateChange={(date) => { this.setState({date:date}) }}
      />
    )
  }
}

Vue JS-方法不会更改数据

1 个答案: