vue.js数据渲染完成后，获取页面高度问题

别盯着我的名字看

发布于 2022-06-09 11:20:53

5.9K0

发布于 2022-06-09 11:20:53

文章被收录于专栏：前端专栏前端专栏

最早学习vue时遇到一点问题，做个记录。

遇到的问题

通过接口请求出来的数据，渲染到页面上，再获取元素内容高度的时候，高度为0

为什么高度会是0

因为我是在接口返回数据后，就直接在回调函数里获取了元素内容的高度。虽然数据获取到了，但是页面还没有及时的渲染出来，所以获取的内容高度就为0了

然后我就延迟2秒获取内容高度，发现内容高度是渲染完成后的正常高度，但是这样肯定是不行的。

使用 $nextTick 方法解决问题

vue官网$nextTick方法介绍

为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

部分代码示例一：

mounted() {
    this.getDataList(); //调用方法
},
methods: {
    //获取数据列表
    getDataList() {
        const that = this;
        axios.get('http://localhost/blog/api/article/getList?currentPage=1&keywords=')
            .then(function (res) {

                that.dataList = res.data.data; //将获取到的数据赋值给 dataList

                const content = that.$refs.content; //通过ref 找到该元素

                console.log(content.offsetHeight); // 0

                //使用$nextTick方法
                that.$nextTick(() => {
                    console.log(content.offsetHeight); // 600
                });

            })
            .catch(function (err) {
                console.log(err);
            });
    }
}

部分代码示例二：

mounted() {
    this.getDataList(); //调用方法
},
//监听事件
watch: {
    //dataList的值改变后会执行 
    dataList(newData, oldData) {
        console.log(newData);
        console.log(oldData);

        const content = this.$refs.content; //通过ref 找到该元素

        console.log(content.offsetHeight); // 0

        //使用$nextTick方法
        this.$nextTick(() => {
            console.log(content.offsetHeight); // 600
        })
    }
},
methods: {
    //获取数据列表
    getDataList() {
        const that = this;
        axios.get('http://localhost/blog/api/article/getList?currentPage=1&keywords=')
            .then(function (res) {
                that.dataList = res.data.data; //将获取到的数据赋值给 dataList
            })
            .catch(function (err) {
                console.log(err);
            });
    }
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-5-7，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法