• 欢迎访问大姚哥前端笔记
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎留言o(∩_∩)o 哈哈

vue ajax多次异步更改数据导致视图无法更新

Vue dayaoge 831次浏览

最近做vue项目,遇到一个头疼的事,ajax第一次请求成功可以更新数据和视图,但再次ajax的时候,数据是更新了,但是视图不改变。
页面代码:

<div class="lesson-list" v-if="classData.cuclist.length">
                    <ul>
                        <li v-for="(item,index) in classData.cuclist" :class="item.class" @click="viewDetailLesson(index)">
                            <div v-if="item.isComing">
                                <div class="lesson-index">第{{item.cuc_class_num}}讲</div>
                                <div class="lesson-status">未开播</div>
                            </div>
                            <div v-else>
                                <div class="lesson-index">第{{item.cuc_class_num}}讲</div>
                                <div class="lesson-tea">{{item.cla_teacher_names}}</div>
                                <div class="lesson-times"><i class="ico-times"></i> {{item.cuc_class_date}} {{item.cuc_start_time}}-{{item.cuc_end_time}}</div>
                                <div class="lesson-btns">
                                    <span class="btn" v-show="item.hasVedio">录屏 <i class="ico-right-arr"></i> </span>
                                    <span class="btn" v-show="item.hasFiles">下载 <i class="ico-download"></i> </span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class='listNoData' v-else>没有讲次信息</div>

js:

export default {
        data() {
            return {
                classData:{
                    claName:"",
                    curOrder:1,
                    cuclist:[],
                }
            }
        },
        mounted(){
            var _ts=this;
            //加载课次列表
            _ts.$ajax({
                method: 'post',
                url: '',
                data: {}.then(function (response) {
                let res=response.data;
                 _ts.$set(_ts.classData,'cuclist',res.cList);
                  getItemInfo();
            })

            //再次更新
            function getItemInfo(){
                //加载录播
                _ts.$ajax({
                    method: 'post',
                    url: '',
                    data:{ }
                }).then(function (response) {
                   _ts.$set(_ts.classData.cuclist[n],'hasVedio',true);
                })
        }
    }

网上找半天也没有解决办法,试了_ts$set依然不起作用。但是数据确实是更新了。最后搜了个取巧的办法试了下果真好使。
html代码添加:

<div class='listNoData' v-show="false">{{loadTimes}}</div>

js代码:

export default {
        data() {
            return {
                classData:{
                    claName:"",
                    curOrder:1,
                    cuclist:[],
                },
loadTimes:1,//请求次数
            }
        },
        mounted(){
            var _ts=this;
            //加载课次列表
            _ts.$ajax({
                method: 'post',
                url: '',
                data: {}.then(function (response) {
                let res=response.data;
                 _ts.$set(_ts.classData,'cuclist',res.cList);
                  getItemInfo();
                 _ts.loadTimes++;
            })

            //再次更新
            function getItemInfo(){
                //加载录播
                _ts.$ajax({
                    method: 'post',
                    url: '',
                    data:{ }
                }).then(function (response) {
                   _ts.$set(_ts.classData.cuclist[n],'hasVedio',true);
                  _ts.loadTimes++;
                })
        }
    }

大致思路就是在data根下面加个字段loadTimes,每次ajax成功之后更新loadTimes,由于loadTimes绑定了视图,所以连着请求来的其他数据也跟着更新了。
先凑合着用,将来发现更好的解决方法再更新此文章。


小白公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明vue ajax多次异步更改数据导致视图无法更新
喜欢 (3)