用ajax请求数据无法后无法更新视图怎么解决,控制台的数据改变了但是视图没有改变

发布于 2022-09-05 10:18:20 字数 1586 浏览 9 评论 0

请输入代码<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./css/login.css"/>
  <script type="text/javascript" src="./js/vue.js"></script>
  <script type="text/javascript" src="./js/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <div id="login" v-show="!onOff">
      <div id="login_box">
        <h3>登陆</h3>
          <input type="text" name="username" autocomplete="off" placeholder="username" v-model="username"/>
          <input type="password" name="password" autocomplete="off" placeholder="password" v-model="password"/>
          <input type="submit" value="提交" v-on:click="getIn"/>
        
      </div>
      
    </div>
    <div id="content" v-show="onOff">
      
    </div>
  </div>

</body>
<script>

var vm=new Vue({
  el:'#app',
  data:{
    username:'',
    password:'',
    onOff:false,
  },
  methods:{
    
    getIn:function(){

      axios.get('/login',{
        params:{
          user:this.username,
          pass:this.password,
        }
        }).then(function(res){
          this.onOff=res.data.ok
          console.log(res.data.ok)
        }).catch(function(err){
        console.log(err)
      })

    },


  }

})

</script>
</html>

图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

坚持沉默 2022-09-12 10:18:20

this指向的问题,在回调函数中,this指向的是回调函数。
办法一:用变量that指向this

    var that =this
    ...
    then(function(res){
       that.onOff = res.data.OK
    })
    

方法二:用箭头函数,箭头函数不会改变this的指向

    then(res=>{
       that.onOff = res.data.OK
    })
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文