Vue中如果想要在DOM加载之后,获取DOM元素中的值应该怎么做?
需求:在请求后台接口时,返回带有HTML标签的数据content
- 在前台中通过v-html指令进行绑定
<div v-html="content" id="con"></div>
其中content数据赋值在created()
生命周期中定义,在updated()
周期函数中获取到DOM元素的值
export default {
name: 'TestResult',
components: {
PieChart,
BarChart
},
data() {
return {
content: '',
}
},
created() {
//created中通过这个函数给content赋值
this.getCon()
},
updated() {
//这里就是监听当DOM元素完全加载的时候,获取表格中的数据
this.$nextTick(()=>{
var a = document.getElementById("con").childNodes[0].rows
console.log(a)
})
},
methods: {
//这个方法中是对请求后台接口,返回带有table标签的HTML代码
getCon();
}
}
}
}
</script>