Vis.js does not work properly with Vue? When adding a new edge - all nodes become red and edges overlap

Hi,

I have created “issue” about this here: https://github.com/almende/vis/issues/2567

It seems that Vis doesn’t work properly with Vue, or I am doing something wrong with Vue…

I have created a very simple app using Vue.js & Vis Network. You can take a look at it here: https://jsfiddle.net/Filip_Z/2ewtzh7w/1/

For some reason, when I add a new edge - all nodes become red and every newly added edge will overlap with the existing one:

On the other side, here is the same version of this app without Vue: https://jsfiddle.net/Filip_Z/63jcj26y/2/

… and there are no problems, everything works fine. There are no errors in the browser console and I cannot figure out why is this happening.

Tooa (almende/vis) wrote:

There was a similar problem with the dataset where all nodes got the title 4 after an update here? **Looks like visjs does not work properly with vue.js** or something is missing on the vue.js side in order to work properly with visjs.

**This issue is really strange.** However, I think it is easier to debug the setData method mentioned in the other issue. Looks like they are related.

Is it possible that Vis & Vue just can’t work properly together, or maybe something is wrong with my Vue? I’m asking because I don’t know how to debug/solve this, I have no idea what is causing this behavior.

I have been having similar issues. The only change that you need to make it work is not to include network among the declared data properties.

Here is a JS fiddle that is a verbatim copy of yours, the only different being that I removed network from the declared data properties:

https://jsfiddle.net/2ewtzh7w/5/

I didn’t investigate in depth the cause of the problem, but I imagine that Vue is adding some methods or properties to the watched data that conflict with existing properties of the vis.Network object.

Hope it helps

Evan You:

I looked at your issue and your analysis is correct - in short, it is not recommended to put complex objects with prototypal inheritance into Vue’s data option (and making them reactive). Moving them out of data is the correct solution.

https://github.com/almende/vis/issues/2567