Vue一个很严重的问题

我在项目中使用了vuedraggable来实现拖拽效果,被拖拽的容器里的div都有固定的ID,ID使用插槽传输。
问题来了:我拖拽后可以看到ID都在拖拽之后发生交换了,但是拖拽前的绘图(使用echarts,基于ID)依然在原来的位置,即它并没有跟着父容器走。而且,我在拖拽之后尝试指定原ID重新绘图,也不能绘制到对应ID的容器上。而是跑到了这个ID原来所在的位置,看起来似乎DOM节点索引并没有在拖拽后更新。

在拖拽后的事件里尝试过
this.$forceUpdate();
$("#v2").html(’’);
$("#v1").html(’’);
$("#v2").removeAttr(‘echarts_instance’);
$("#v1").removeAttr(‘echarts_instance’);
echarts clear() dispose();
重新绘图,依然无法刷新。

在Vue中使用jQuery也是一个很严重的问题!!!

2 Likes

即使不用Jquery,情况是拖拽之后,要找到指定的div,都是一个问题。
根据ID找到的div和在dom上实际的Div不是同一个,这就很尴尬了。我有一些其他的基于ID的应用场景,必须借助于第三方库,比如ECharts。

能提供个 demo 吗?

既然选择vue,能用vue的就尽量用vue,尽量不用jQuery操作DOM

请看问题的实质,我在这里用Jquery仅仅是作为一个测试。

用ref试试看,也有同样问题么

我整理了下,Demo在这里:codepen
问题已解决,谢谢各位!

1 Like

将拖拽事件放在自定义指令中

大概是你使用的方式错了。 我猜你是使用 固定字段+index 来传入的id和key吧。如果这样,是会有问题的。虽然,id是不固定的,但是固定index位置的div的id是不变的。 采用固定字段+aa.id 来传入key和id事实。。。我怕我描述不清,类似这样
arr =[
{id:1},
{id:2},
{id:3}
]

	<div v-for='i in arr'>
		<div :key='i.id' :id='"Im id"+i.id'></div>
	</div>

请问这个问题是如何解决的 我也遇到了

用id不要用下标应该就可以解决

echart初始化是在mounted里面写着呢,但是draggbale插件应该是只移动的数据,不移动dom吧,所以你得再moveend事件里面想办法重新加载echart,我大概改了一下,如下图

1 Like