Vue: 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!