Vue.js 不呈现列表中的元素

Question

所以，对于上下文，我有一个应用程序的客户端，服务器通过套接字连接向客户端发送客户端的朋友。我可以检索朋友，甚至可以创建可点击的列表元素，以便用户可以向朋友发送消息等。但是我遇到的一个问题是，当使用 mustache 语法呈现信息时，什么也没有呈现。我有以下代码。

index.html（下面是app div里面的）

<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>

index.js

var socket = io.connect('http://localhost:3000');
var app = new Vue({
    el: '#app',
    data: {
        messageContent: '',
        friends: [],
        messages: []
    }
})
socket.on('connect', function(){
  socket.emit('authentication', Cookies.get('user'));
  socket.on('authenticated', function() {
  socket.on('sendFriends',(data) => {
        data.forEach(element => {
            console.log(element.username)
            app.friends.push({
                text: element.username + '.'+element.id, 
                id: element.id
            })

        })
        toUser = app.friends[0].id
    })
})
})

即使我在没有来自套接字连接的数据的情况下填充朋友数组，每个元素上的文本也不会呈现。我的意思是，会有一些具有点击功能的项目符号，但是没有文本。但是，当我创建 codepen 时，数据会正确呈现。这是否与套接字连接以及 Vue 如何对数据更改做出反应有关？ https://codepen.io/dvub/pen/XWaebyb（codepen 链接）

Answer 1

除非您进入 Vue 的应用上下文，否则您无法正确设置 friends 值。所以你应该开始把所有的东西放回你的 Vue 应用程序中。它应该看起来更像某种东西（我不能保证它可以工作，因为我不知道你的套接字库是如何工作的，但它应该是这样构造的）：

<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
        });
    }
});

Answer 2

由于 API 调用是异步的，在处理调用和接收数据之前，Vue 已经在读取 friends 的值。因此，在 API 返回任何内容之前，Vue 已经开始循环遍历 friends 数组。

个人friend 作为道具传递给子组件。子组件现在正在寻找该对象的属性（即friend.name）。

但是第一次挂载组件时，friends 数组是空的。因此添加一个简单的v-if 来停止渲染，直到您收到所需的信息。

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

您可能还想删除

toUser = app.friends[0].id

它看起来不像有效的 JS 语法（toUser 声明在哪里？）。