vue 获取id元素_.vue组件中获取DOM元素问题
一、问题引入原项目把一块内容直接写在了模块中(浏览器显示的一整个页面),现在想把它提成一个单独组件,而且把其中使用document.getElementById('id')改为ref获取元素的形式。export default {methods: {getRely (applicationVersionId) {let _this = this;//axio获取数据,成功后调用drawRelati
一、问题引入
原项目把一块内容直接写在了模块中(浏览器显示的一整个页面),现在想把它提成一个单独组件,而且把其中使用document.getElementById('id')改为ref获取元素的形式。
export default {
methods: {
getRely (applicationVersionId) {
let _this = this;
//axio获取数据,成功后调用drawRelationChart 初始化echart表格
},
drawRelationChart (param) {
this.relationChart = echarts.init(document.getElementById('transferRelation'));
//...
}
}
单独创建一个.vue组件,通过绑定传值,触发页面变化从而触发beforeUpdate。
class='transferRelation'
ref="transferRelation"
>
export default {
props: {
relyData: {
type: Object,
default() {
return {
data: [],
link: []
};
}
}
},
mounted() {
console.log("调用关系-mounted");
console.log(_this.$refs.transferRelation);
},
beforeUpdate() {
console.log("调用关系-beforeUpdate");
const _this = this;
//初始化图表
console.log(_this.$refs.transferRelation);
//TODO
}
};
然后发现beforeUpdate()中根本获取不到此元素,用原生js获取也不行。
然后发现mounted中也获取不到。
二、问题说明
mounted()生命周期函数,页面还未真正挂载到浏览器上,执行完成后立马挂在,所以无法获取到页面元素。
beforeUpdate()生命周期函数,浏览器页面还未重新跟新加载,也无法获取到元素。
三、解决
1、beforeUpdate()生命周期函数中,在获取元素语句外套用this.$nextTick(function(){...})。(mounted无效,原因待查明)
官方解释:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。即DOM真正加载完成。
2、直接使用updated生命周期函数,页面重新加载完毕。
更多推荐
所有评论(0)