[Vuejs]-Vue.js not rendering elements in a list

by

0👍

Since API calls are asynchronous, Vue is already reading the values of friends before the call is processed and the data is received. So Vue is already started looping over the friends array before anything has come back from the API.

The individual friend is passed as a prop to a child component. The child component inturn is now looking for properties on that object (ie, friend.name).

But the friends array is empty when the component is first mounted. Therefore adding a simple v-if to stop the rendering until you have received the information is needed.

<ul id="friend-list" v-if="friends.length" :key="friends.name">

You may also want to remove

toUser = app.friends[0].id

It does not look like valid JS syntax (where is toUser declared?).

0👍

You can’t set properly friends values unless you’re into the Vue’s app context. So you should begin to put back all the stuff into your Vue app. It should looks more like something (I can’t guarantee it works since I don’t know how your socket lib works, but this is how it should be structured) :

<div id="friends">
    <p>Friends</p>
    <ul id="friend-list">
        <li v-for="friend in friends"
            v-on:click="setFriend(friend.id)">Friend:{{friend.text}}
        </li>
    </ul>
</div>

const app = new Vue({
    el: '#app',
    data: {
        socket: null,
        messageContent: '',
        friends: [],
        messages: []
    },
    mounted: {
        // Here it depends on how the library works. You may have to use async / await on connection init :
        this socket = io.connect('http://localhost:3000');
        this.socket.on('connect', function(){
            this.socket.emit('authentication', Cookies.get('user'));
            this.socket.on('authenticated', function() {
            this.socket.on('sendFriends',(data) => {
                data.forEach(element => {
                    console.log(element.username)
                    this.friends.push({
                        text: element.username + '.'+element.id, 
                        id: element.id
                    });
                });
            });
            // I don't know what you're trying to do here so I commented this one :
            // toUser = app.friends[0].id
        });
    }
});

Leave a comment