vue.js v-for list not updating

Question

I have this list:

    

        {{ list.personName }}
    

And th

Answer 1

Array change detection is a bit tricky in Vue. Most of the in place array methods are working as expected (i.e. doing a splice in your $data.names array would work), but assigining values directly (i.e. $data.names[0] = 'Joe') would not update the reactively rendered components. Depending on how you process the server side results you might need to think about these options described in the in vue documentation: Array Change Detection.

Some ideas to explore:

• using the v-bind:key="some_id" to have better
• using the push to add new elements
• using Vue.set(example1.items, indexOfItem, newValue) (also mentioned by Artokun)

Answer 2

I am not an expert on sockets, but that is not the recommended way of handling a socket connection.

A socket sets up a persistent connection with server, and you may get data at any moment from server. Your socket.on("message", function(data) {...}) is the handler for these asynchronous data from server.

In your sample code, your message handler seems to create a new instance of Vue() every time the server sends some data. You will quickly end up with multiple versions of Vue() instances, potentially leading to crashing user's browser tab by hogging memory.

I do not use socket.io, but based on my understanding of web apps in general, here is how I would prefer to do it:

// Initialize your Vue app first:
new Vue ({
    el: '#tab',
    template: `
        <ul id="tab">
            <li v-for="list in names">
                {{ list.personName }}
            </li>
        </ul>
    `
    data: {
        names: [] // start with blank, and modify later
    },
    created: function() {
        // This 'created' hook is called when your Vue instance is setup
        // TODO: Initialize your socket connection here.
        // ...
        // Setup your socket listener
        mySocketInstance.on("message", response_data => {
            // Assuming your response_data contains 'user_names' array
            this.names = response_data.user_names;
            // Note: 'this' in the above line points to outer scope, that is why we need arrow functions
        })
    }
});

The above code might work for you. You still have to do a lot of testing and debugging. But this is how I would expect things to work.

Note:

1. The code sample creates only one Vue() instance, and initializes socket listener in the created hook. So there is only one listener / handler for your socket messages.

2. The socket message handler uses javascript arrow function which ensures that your outer scope this is same as inner scope this. Thus you will be able to update your names correctly.

Answer 3

If it's getting passed in as an object from the server, make sure to use Vue.set(obj, key, value) when binding reactively to data().

http://vuejs.org/api/#Vue-set