vue等待数据渲染完成后执行下一个方法问题

 更新时间:2022年12月03日 09:35:31   作者:CahierX  
这篇文章主要介绍了vue等待数据渲染完成后执行下一个方法问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue等待数据渲染完成后执行下一个方法

 watch: {
        dataDetails: function() {
            this.$nextTick(() => { 
                this.changeView()
            });
        }
    },

在watch里面写上要监控的数据,上面的例子是监控dataDetails,在this.$nextTick()勾子里面写的方法就可以在dataDetails渲染到页面完成之后执行changeView方法

vue页面渲染结束事件

在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置、宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不准确。使用过jquery的都知道,有个ready方法可以使用,但vue.js则需要结合watch和nextTick方法来使用。

1.下面开始介绍下,在页面加载一个数据列表完成之后,页面自动滚动定位到中间某个列表元素,需要在列表数据渲染完成,计算列表高度,再控制定位到指定行。首先介绍下一开始尝试没有生效的方案,这也是大家最容易出现错误的地方,vue.js提供的mounted函数,表示挂载到实例上去之后调用该钩子。

2.运行之后,发现mounted执行的时候,获取到的height值不对,打个断点也可以发现,此时页面没有渲染完成,列表块还是一片空白

3.此时查询官方api文档发现,有一个nextTick方法,意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。使用之后发现,还是不能解决我所需要的效果

4.继续查询api文档发现,watch方法,用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调,再次尝试,运行后发现还是不行

5.最终把watch和nextTick组合一起,watch:{ showList:function(){ this.goPrice(0); }}

showList对应表格页面的绑定变量

6.运行后发现,已经达到了预期的效果

注意:这里 watch 要和 methods 方法平级展示

watch:{
        htcfOrder:function(){
            //页面渲染完成后的操作
            this.$nextTick(function(){
                // 开工前
                if(vm.htcfOrder !=null && vm.htcfOrder.beforeWorkList !=null && vm.htcfOrder.beforeWorkList.length>0){
                    for (let i = 0; i < vm.htcfOrder.beforeWorkList.length; i++) {
                        if (vm.htcfOrder.beforeWorkList[i].urlType == 1){
                            var player2 = videojs(vm.htcfOrder.beforeWorkList[i].extKey+i,{
                                muted: false,controls : true,height:300,width:300,poster:'',src:'',preload:"auto"
                            },function(){
                            });
                            player2.reset();
                            player2.src(vm.htcfOrder.beforeWorkList[i].extValue);
                            player2.load();
                        }
                    }
                }
            })
        }
    },
methods:{}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中父子组件通讯之todolist组件功能开发

    Vue中父子组件通讯之todolist组件功能开发

    这篇文章主要介绍了Vue中父子组件通讯——todolist组件功能开发的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue中el-tree 横向滚动条的实现

    vue中el-tree 横向滚动条的实现

    本文详细介绍了在Vue框架中使用el-tree组件创建横向滚动条的方法,通过代码示例和步骤说明,帮助开发者理解和实现横向滚动功能,感兴趣的可以了解一下
    2024-09-09
  • JavaScript 沙箱探索

    JavaScript 沙箱探索

    这篇文章主要介绍了JavaScript 沙箱探索,沙箱是基于 event bus 形式的通信实现上层的功能,文章的例子选择接口实现了 web worker 与 quickjs 的 EventEmitter,,需要的朋友可以参考一下
    2021-10-10
  • vue 标签属性数据绑定和拼接的实现方法

    vue 标签属性数据绑定和拼接的实现方法

    这篇文章主要介绍了vue 标签属性数据绑定和拼接的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 使用VitePress搭建及部署vue组件库文档的示例详解

    使用VitePress搭建及部署vue组件库文档的示例详解

    这篇文章主要介绍了使用VitePress搭建及部署vue组件库文档,本文以element-plus作为示例来搭建一个文档,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • configureWebpack、chainWebpack配置vue.config.js方式

    configureWebpack、chainWebpack配置vue.config.js方式

    这篇文章主要介绍了configureWebpack、chainWebpack配置vue.config.js方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue中key的作用及原理详解

    Vue中key的作用及原理详解

    本文主要介绍了Vue3中key的作用和工作原理,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Vue使用MD5对前后端进行加密的实现

    Vue使用MD5对前后端进行加密的实现

    前后端分离的项目,遇到了对密码进行加密的情况,在前端或者是在后端加密都是可以的,本文主要介绍了Vue使用MD5对前后端进行加密的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • Vue数据驱动模拟实现4

    Vue数据驱动模拟实现4

    这篇文章主要介绍了Vue数据驱动模拟实现的相关资料,介绍了Array的变异方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • vue 路由子组件created和mounted不起作用的解决方法

    vue 路由子组件created和mounted不起作用的解决方法

    今天小编就为大家分享一篇vue 路由子组件created和mounted不起作用的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论