vue ajax请求结束再次执行查询方法,Vue.js 监控v-for循环渲染完成后再执行方法

本篇记录一下Vue.js 监控v-for循环渲染完成后再执行方法。

再项目开发中经常会遇到v-for循环渲染完成后需要设置某些元素选中或者其它一些特有样式。

以前都是用setTimeout实现。

但for的数据源是通过ajax获取,获取的时间不稳定，导致setTimeout执行时,还没有渲染完毕.

今天我记得一下其它方式 watch + vm.nextTick

自游互动

vm = new Vue({

el:'.app',

data: {

dataList: [],

watch:{

//与上面的dataList 名字保持一制

dataList: function() {

/*DOM还没更新*/

this.$nextTick(function(){

/*DOM更新了*/

/*现在数据已经渲染完毕*/

})

}

mounted:function() {

//ajax获取数据相关代码就不写了,按自己需求写就可以了

//主要代码是上面的watch 里面的代码

//this.DataList = ajax获取到的数据

}

})

vue ajax请求结束再次执行查询方法,Vue.js 监控v-for循环渲染完成后再执行方法相关推荐

alert时java还时js_js 加alert后才能执行方法
原因是:访问页面时,某些js方法还没初始化(或者还没有加载出来)此时调用肯定不执行.alert起到了延迟的功能,当用户点击确定此时要执行的js恰好初始化完成,能正常执行. 解决方法是加setTime ...
vue ajax传输数组,ajax请求回数组数据，Vue页面数组没同步问题
记录bug 为什么 ajax 获取到了 vm.$data.list 页面上却没有显示出来的? 代码 //页面 {{ *** }} //请求数据 send: function(){ var that = ...
多个Ajax请求成功后再执行后续方法
经常会遇到需要ajax请求完毕后调用某方法,这次是多个ajax请求成功后,用它们返回的数据传参给回调方法,查询了一下,可以用jquery中的 $.when(),使用方法如下: $.when( $.aj ...
前端学习（1925）vue之电商管理系统电商系统之通过一层for循环渲染
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
Springboot项目启动后立即执行方法
Springboot项目启动后执行方法,有三种实现方式. 此篇博客介绍的方法可以在程序启动时加载一些自定义的监听器之类的,例如Socket服务的监听器,此时如果使用@PostConstract,Soc ...
时间戳处理：vue中请求接口返回的数据将时间戳转换成时间并渲染到页面
问题: 今天遇到一个问题是,请求接口,返回了很多的时间戳数据.将时间戳转换成时间.并渲染到页面上.之前有篇文章讲的是单个时间戳的转换.这次是多个数据.我有点不知所措了. 分析: 经过思考,我们可以这样 ...
Vue父组件mounted执行完后再执行子组件mounted执行顺序问题
文章目录一.vue加载顺序? 二.父组件和子组件 1.封装ip地址框 2.前端从数据库取数据并且赋值 bug 解决方案一.vue加载顺序? 父组件 created 子组件 created 子组件 ...
微信小程序 app.js中onLaunch中方法执行完毕后再执行index首页数据请求
实际开发中遇到在app.js中onlaunch中方法未执行完毕的情况下,先进入首页执行index方法的问题.如果在onlaunch中写了自动登录的方法,会存在首页加载时显示未登录的情况(此时onlau ...
vue.js实现图片、视频文件压缩后再上传
这里只展示图片上传代码在这里插入代码片 ``` //html部分// 上传图片<div class="fileBox"><span class="fi ...
js 加alert后才能执行方法
原因是:访问页面时,某些js方法还没初始化(或者还没有加载出来)此时调用肯定不执行.alert起到了延迟的功能,当用户点击确定此时要执行的js恰好初始化完成,能正常执行. 解决方法是加setTime ...

vue ajax请求结束再次执行查询方法,Vue.js 监控v-for循环渲染完成后再执行方法

vue ajax请求结束再次执行查询方法,Vue.js 监控v-for循环渲染完成后再执行方法相关推荐

最新文章

热门文章