怎么解决被vue监听的dom节点下,原生js代码失效的问题?

初始化Vue的el属性后,vue会监听整个el的dom节点,从而影响了这个dom节点下的js原生事件失效,具体代码和效果截图如下:

上图是正常情况,使用vue就变成这样了:

我的echarts代码是这样的:

/* 广告投放的语句*/
echarts.init( document.getElementById( 'ads-info' ) ).setOption( customer_option )
vue语句:

var vm = new Vue({
		el: '#app',
		data: {
			scInfo: '',
		},
		created: function () {
			var self = this;
			var guid = localStorage.getItem('guid');
			var type = localStorage.getItem('type');
			api.getShopOrCompanyInfo( type, guid, function( result ){
				if ( result.status != 200 ) {
					alert('数据请求失败!');
				}
				self.scInfo = result.data;
				console.log(self.scInfo);
			});
		},
		mounted: function () {
			echarts.init( document.getElementById( 'sales-info' ) ).setOption( customer_option );
			console.log('df')
		},
	});

其中#ads-info是#app的子dom节点,这个问题已经困扰我两天了,求助。[details=Summary]This text will be hidden[/details]

首先。。。 建议格式化下代码。。 用代码段的方式提问。。 这样大家看的都轻松一些。
然后。。。 我并没有在你的代码里面看到

echarts.init( document.getElementById( 'ads-info' ) ).setOption( customer_option )

这句话。

但是我推测是因为 vue 的生命周期函数没有正确的使用。 vue 本身和其他 dom 操作的库是没有冲突的。
在 mounted 函数里面。 vue 被 render 才可能拿到 dom 的内容。

建议你把用 dom 的

echarts.init( document.getElementById( 'ads-info' ) ).setOption( customer_option )

改写成

mounted() {
  echarts.init( this.$el.querySelector( '#ads-info' ) ).setOption( customer_option )   
}

我就直接用 ES6 语法了, 可以自行改写。。 希望对你有帮助

你好,非常感谢你的回答,第一次提问不太适应这个编辑器,抱歉了。我根据你的提示,修改了代码,果然是生命周期的问题,在mounted钩子下,依然无法获取到#ads-info的dom节点,但是在updated下可以获取到,所以代码变成了这样:

var vm = new Vue({
		el: '#app',
		data: {
			scInfo: '',
		},
		created: function () {
			var self = this;
			var guid = localStorage.getItem('guid');
			var type = localStorage.getItem('type');
			api.getShopOrCompanyInfo( type, guid, function( result ){
				if ( result.status != 200 ) {
					alert('数据请求失败!');
				}
				self.scInfo = result.data;
				console.log(self.scInfo);
			});
		},
		mounted: function () {
			console.log( document.getElementById( 'sales-info' ) );//null
		},
		updated: function () {
			console.log( document.getElementById( 'sales-info' ) );
			echarts.init( document.getElementById( 'sales-info' ) ).setOption( customer_option );
		}
	});

mounted 和 updated 的生命周期, 不太一样。

不过也是看你需求。 其实 按照道理来讲。 mounted 之后, dom 就已经在了。 不过也是看 echart 是不是有自己做什么 这个我不太清楚。

updated 生命周期是在 每次 data 里面有数据变化的时候 就要 重新 rerender 执行 updated hook。 所以你的代码可能会重复 init

这个 yyx 大大的 document 最清楚了

我刚刚做了其它dom测试,发现在mounted钩子里是不能获取到dom的,所以echarts没有做什么特别的操作,我使用的vue版本是2.2.4。你回答问题好热心啊

回答别人问题 也是自己学习的过程。 可能都是以后自己会踩的坑。 所以尽可能了解的比较透彻一些。
可以试试 不用 document.getElementById ,然后 this.$el.querySelector 这种方式获取 子元素呢。

你现在这么写的话。 比如你要上两个 你写的 component 里面都调用了 eChart。 你就很被动。 因为 就会有两个 id 一样的 都叫 sales-info 。第二个就不会被渲染, 所以比较建议你写相对的 用 this.$el 来获取。

好的,不过mounted里不能获取到dom,感觉有点诡异啊


这一条我说错了,在正常情况下,mounted里已经初始化vm.$el了,我的代码出了一点问题。

你好,我在mounted函数中也获取不到dom对象,请问您后来的解决方法是什么。

我的问题:
我打算做的是在一个组件初始化后,在这个子组件的mounted函数中动态的插入一个el。
我采用的方法是this.$refs.xxx.$el.appendChild()方法。首先我直接在mounted函数中写获取$refs.xxx,但是他是空的。应该是还没有被插入到dom节点。
所以我没办法插入我的el
自己在组件中手动触发$refs.xxx是可以拿到的。
这个问题请问怎么解决?

我在mounted中使用了$nextTrick也不好使