zoukankan      html  css  js  c++  java
  • Vue中ajax返回的结果赋值

    这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了

    new Vue({
        el:'#app',
        data:{
            msg:''
        },
        created:function(){
            $.ajax({
                url:'',  
                data:'',
                dataType:'json',
                success:function(res){
                    this.msg = res.data;
                }   
            })
        }
    })
    

    原因在于在ajax的success函数中,this的指向不再是vue的实例
    解决办法可以先把this保存起来

    new Vue({
        el:'#app',
        data:{
            msg:''
        },
        created:function(){
            var that = this;
            $.ajax({
                url:'',  
                data:'',
                dataType:'json',
                success:function(res){
                    that.msg = res.data;
                }   
            })
        }
    })
    

    也可以将vue实例赋值给变量,再通过变量来访问其数据,实例化后window里会有vm实例对象,底层会把data里的属性挂载到vm实例对象上作为vm的属性

    var vm = new Vue({
        el:'#app',
        data:{
            msg:''
        },
        created:function(){
            $.ajax({
                url:'',  
                data:'',
                dataType:'json',
                success:function(res){
                    vm.msg = res.data;
                }   
            })
        }
    })
    

    参考资料

    Vue中ajax赋值问题

  • 相关阅读:
    HDOJ 1093
    HDOJ 1089
    HDOJ 1094
    qsort函数
    HDOJ 1092
    HDOJ 1091
    NYOJ 448(贪心)
    HDOJ 1090
    HDOJ 1097(幂取模)
    winform用户输入查询与拼音首字母的结合,提高用户的操作体验
  • 原文地址:https://www.cnblogs.com/Grani/p/10486969.html
Copyright © 2011-2022 走看看