vue 获取id元素_.vue组件中获取DOM元素问题

一、问题引入

原项目把一块内容直接写在了模块中(浏览器显示的一整个页面)，现在想把它提成一个单独组件，而且把其中使用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生命周期函数，页面重新加载完毕。

vue 获取id元素_.vue组件中获取DOM元素问题相关推荐

vue中获取/操作组件中的dom元素
最近刚做了一个项目,需要用到地图,选择的是腾讯地图,创建地图的时候,需要给地图创建函数中传入地图容器的id或者容器的dom元素,但是在调试过程中,发现怎么都无法获取dom元素,直接通过getEleme ...
vue 父刷新子_父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法...
场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...
vue 获取当前路由_VUE 在组件中获取路由信息
一.核心代码 1.获取参数 this.$route.query.id this.$route.query 2.页面跳转登录 3.方法跳转 this.$router.push({ path: '/lo ...
python获取编码方式_在Python中获取HTTP响应的字符集/编码的好方法
小编典典 _, params = cgi.parse_header('text/html; charset=utf-8') print params['charset'] # -> utf-8 ...
Web项目中获取SpringBean——在非Spring组件中获取SpringBean
最近在做项目的时候我发现一个问题:Spring的IOC容器不能在Web中被引用(或者说不能被任意地引用).我们在配置文件中让Spring自动装配,但并没有留住ApplicationContext的实例 ...
python获取行号_在python中获取当前位置所在的行号和函数名
python中没办法直接取得当前的行号和函数名.这是有人在论坛里提出的问题,底下一群人只是在猜测python为什么不像__file__一样提供__line__和__func__,但是却最终也没有找到解 ...
java dom 获得子元素_在JavaScript中删除DOM节点的所有子元素
我将如何删除JavaScript中DOM节点的所有子元素? 说我有以下(丑陋的)HTML: hello world 我抓住了我想要的节点,如下所示: var myNode = document.get ...
java 获取文章关键词_在文章中获取关键字
首先需要的jar包下载apache的lucene-core-3.6.2.jar,lucene-highlighter-3.6.2.jar,lucene-memory-3.6.2.jar,lucene ...
python获取计算机时间_在Python中获取计算机的UTC偏移量
当年话下 time.timezone:import timeprint -time.timezone它以秒为单位打印UTC偏移量(考虑到夏令时(DST),请参见time.altzone:is_dst ...
python获取上个月最后一天_在Python中获取本月的最后一天
Is there a way using Python's standard library to easily determine (i.e. one function call) the last ...

vue 获取id元素_.vue组件中获取DOM元素问题

vue 获取id元素_.vue组件中获取DOM元素问题相关推荐

最新文章

热门文章