vue通过ajax获取数据问题解决方案

切版网专注网页切版服务


切版近期的一个VUE开发前端外包项目中碰到的问题,这个是继未来教育h5项目(vue)等之后的又一个vue开发项目,项目用到了vue以及jquery的ajax用来获取数据,然后碰到不能正常赋值的问题,最后原因竟然是这样:

看下例:

<script type="text/javascript">

     new Vue({
            el:'#app',
            data:{data:""},
            created:function(){
                var url="json.jsp";
                var _self=this;
                $.get(url,function(data){
                    _self.data=eval("(" + data +")");
                })
                /*
                this.$http.get(url).then(function(data){
                    var json=data.body;
                    this.data=eval("(" + json +")");
                },function(response){
                    console.info(response);
                })*/
            }
          });
    </script>

这里必须设置 vue的data的初始数据,即使此时数据为空。

在使用ajax获取数据时,使用vue-resource 更加合适。

使用vue-resource代码如下:

<script type="text/javascript">

     new Vue({
            el:'#app',
            data:{data:""},
            created:function(){
                var url="json.jsp";

                this.$http.get(url).then(function(data){
                    var json=data.body;
                    this.data=eval("(" + json +")");
                },function(response){
                    console.info(response);
                })
            }
          });
    </script>

这里我们看到设置VUE实例数据时,直接使用 this.data 就可以设置vue的数据了。

使用jquery的时候,代码如下:

<script type="text/javascript">
     new Vue({
            el:'#app',
            data:{data:""},
            beforeCreate:function(){
                var url="json.jsp";
                var _self=this;
                $.get(url,function(data){
                    _self.data=eval("(" + data +")");
                })
            }
          });
    </script>

这里在需要先将 this 赋值给 _self ,让后在jquery的get方法中进行使用,这样使用起来没有vue-resource方便。

免费索取报价