vis.js Network & Vue.js - not working properly

[FilipQL]

Hi,

I am using Vis Network with Vue.js and I created two very simple applications, but none of them is working properly.

1) The first app is here: https://jsfiddle.net/Filip_Z/9k2s3dgj/4/

The problem is that it cannot delete only the first node (with id=0). All of the other nodes can be deleted.

In the browser console there are no errors.

    Vue.component('ovs-network', {
        template: "#mytmp",
        data() {
            return {
                network: null,
                nodes: [
                    { id: 0, label: '0' },
                    { id: 1, label: '1' },
                    { id: 2, label: '2' },
                    { id: 3, label: '3' },
                    { id: 4, label: '4' }
                ],
                edges: [],
                options: {
                    manipulation: {
                        enabled: true,
                        initiallyActive: true,
                        deleteNode: function (deleteData, callback) {
                            callback(deleteData)
                        }
                    }
                },
                container: ''
            }
        },

        mounted() {
            this.container = document.getElementById('mynetwork');
            var data = {
                nodes: this.nodes,
                edges: this.edges
            };
            this.network = new vis.Network(this.container, data, this.options);
        }
    });


    const app = new Vue({
        el: '#app'
    });

2) The second app is here: https://jsfiddle.net/Filip_Z/3ead4r51/1/

The problem is that after applying the setData method, wrong labels are displayed. As you can see in the example, when you click on the button - this Vue method will be executed:

                updateData() {
                    var nodes = [
                        { id: 0, label: '0' },
                        { id: 1, label: '1' },
                        { id: 4, label: '4' }
                    ];

                    this.network.setData({ nodes: nodes, edges: []});
                    console.log('Updated!');
                    this.disabled = true;
                }

So there will be three nodes but, for some reason, all these nodes will have the same label: '4'.

In the browser console there are no errors.

Now, I'm not sure where the problem is (Vue or Vis).

[danieldiekmeier]

I tried to remove Vue from your examples, and the first one still doesn't work as you expect, so I think it doesn't have anything to do with Vuejs.

Can't remove 0: https://jsfiddle.net/5zfsebqt/

My guess is that vis checks for truthy-ness in the ids, because if you use a string as the id, it works, and you can remove the node:

nodes: [
    { id: '0', label: '0' },
    { id: 1, label: '1' },
    { id: 2, label: '2' },
    { id: 3, label: '3' },
    { id: 4, label: '4' }
]

---

In the second example, it does actually work when you remove Vue

Updating the nodes works now: https://jsfiddle.net/oagjq7es/1/

but I'm not sure why.

---

Hope this helps.

[LinusBorg]

Thank your for your interest in this project.

However, your issue is a usage/support question, and the issue tracker is reserved exclusively for bug reports and feature requests (as outlined in our Contributing Guide).

We encourage you to ask it on the forum , Stack Overflow or on gitter and are happy to help you out there.

[FilipQL]

@danieldiekmeier Yeah, the first example definitely has nothing to do with Vue. As for the second example - I'm also not sure why it doesn't work with Vue... without Vue everything works fine. Anyway, thanks.

[wimrijnders]

FYI, I think this is an issue with vue.js, not simply a usage/support question. This is a possible duplicate of vis.js issue 2567.

[yyx990803]

@wimrijnders 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.

[wimrijnders]

@yyx990803 Thank you very much for the confirmation, I really really appreciate it. I can use this to close off several issues we have running.

I'm all for a good understanding with maintainers of other projects. I truly hope more of them are as understanding as you. TIL to always be cooperative to other maintainers.

You made my day a little better; have a good one yourself!

[songherowith]

@wimrijnders 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.

Temporary method，you can set Vue's data to window .
window.data = {
nodes: window.nodesVis,
edges: window.edgesVis,
};
window.network = new vis.Network(window.container, window.data, window.options);