vue结合jquery做ajax时页面绑定v-for时无法显示数据

小鱼儿 2022-12-25 10:59 127阅读 0赞

页面代码如下:

<ul id="example-1">
            <li v-for="pic in sites">
                <dt>{
       { pic.path }}</dt>
                <dl>{
       {pic.id}}</dl>
                <dl>{
       {pic.description}}</dl>
            </li>
    </ul>

vue代码如下:

出现的问题:   页面上v-for绑定的数据不显示，浏览器中也没有错误提示.

分析:

这里是通过$.ajax()发出请求的，在ajax(\{\})中引用的this是指的ajax中的对象，而不再是vue的对象，所以此时代码中采用的this.sites = result.data.data;        //获取数据列表

是将数据绑定到了ajax中的对象，而没有被vue对象绑定， 所以错误。

解决方案:  在 ajax()请求外，先用一个变量保存好 vue对象的引用 this.

//分页查询方法
                dataListFn: function (index) {
                    var page = index;
                    var self = this;   //一定要注意这一句，在ajax中的this指的是ajax对象，而不是 vue的对象
                    $.ajax({
                        type: "POST",
                        url: "/piclib/findAll",
                        data: {page: page, pageSize: self.pageSize, description: 'good'},
                        dataType: "json",
                        success: function (result) {
                            if (result.code == 1) {
                                var len = result.data.data.length;
                                self.sites = result.data.data;		//获取数据列表
                                self.all = result.data.totalPages;  //总页数
                                self.cur = result.data.page;		//当前页面
                                self.totalSize = result.data.total;	//当前条数
                            } else {
                                alert("查询失败," + yc.data.msg);
                            }
                        }
                    });
                },