最早学习vue时遇到一点问题,做个记录。
通过接口请求出来的数据,渲染到页面上,再获取元素内容高度的时候,高度为0
因为我是在接口返回数据后,就直接在回调函数里获取了元素内容的高度。虽然数据获取到了,但是页面还没有及时的渲染出来,所以获取的内容高度就为0了
然后我就延迟2秒获取内容高度,发现内容高度是渲染完成后的正常高度,但是这样肯定是不行的。
为了在数据变化之后等待 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);
});
}
}