entonces, por contexto, tengo un lado del cliente para una aplicación donde el servidor envía al cliente a los amigos del cliente a través de una conexión de socket. Puedo recuperar a los amigos e incluso crear elementos de lista en los que se puede hacer clic para que el usuario pueda enviar un mensaje a un amigo, etc. Sin embargo, el único problema que tengo es que cuando uso la sintaxis de bigote para representar información, no aparece nada. tengo el siguiente código.
index.html (lo siguiente está dentro del div de la aplicación)
<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>índice.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 }) }) })Incluso si tuviera que llenar la matriz de amigos sin datos de la conexión del socket, el texto de cada elemento no se mostraría. Con esto quiero decir, habría viñetas que tienen la función de clic, sin embargo, no hay texto. Sin embargo, cuando creo un codepen, los datos se procesan correctamente. ¿Tiene esto que ver con la conexión del socket y cómo reacciona Vue al cambio de datos? https://codepen.io/dvub/pen/XWaebyb (enlace codepen)
Dado que las llamadas a la API son asíncronas, Vue ya está leyendo los valores de los friends antes de que se procese la llamada y se reciban los datos. Entonces, Vue ya comenzó a recorrer la matriz de friends antes de que algo regrese de la API.
El friend individual se pasa como accesorio a un componente secundario. El componente hijo, a su vez, ahora está buscando propiedades en ese objeto (es decir, friend.name ).
Pero la matriz de amigos está vacía cuando el componente se monta por primera vez. Por lo tanto, es necesario agregar un simple v-if para detener la representación hasta que haya recibido la información.
<ul id="friend-list" v-if="friends.length" :key="friends.name">También es posible que desee eliminar
toUser = app.friends[0].id No parece una sintaxis JS válida (¿dónde se declara toUser ?).
No puede establecer valores de friends correctamente a menos que esté en el contexto de la aplicación de Vue. Por lo tanto, debe comenzar a volver a colocar todas las cosas en su aplicación Vue. Debería parecerse más a algo (no puedo garantizar que funcione ya que no sé cómo funciona su socket lib, pero así es como debería estar estructurado):
<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 }); } });