node.jsvue.jssocket.io-1.0

vuejs emit from soket.io trouble


I'm trying to get data from the server with the socket. But vue does not fill the table, because the client has an array, and the server returns objects.

serverside

...
const r = require('rethinkdb');
const io = socketIO(server);
r.connect(db)  
    .then(conn => {
        io.on('connection', (client) => {
             r.table('messages')
                 .run(conn)
                 .then(cursor => {
                     cursor.each((err, message) => {
                         io.sockets.emit('messages', message);
                     });
                 });

client- vue

<template>
....
 <table>
 <tr>
   <th>name</th>
   <th>message</th>
   <th>date</th>
 </tr>
 <tr v-for="object in objects" :key="object.id">
   <td>{{object.id}}</td>
   <td>{{object.name}}</td>
   <td>{{object.message}}</td>
   <td>{{object.date}}</td>
 </tr>
 </table>
    ...
    <script>     
    export default {
      name: 'App',
      data () {
        return {
          objects: []
        }
      },
      methods: {
        send () {
          this.$socket.on('test',message => {
              this.objects = message  
              console.log(message)
              })                      
        }
      }

in console: info but vue needs array of objects: error myrepo (fullcode) https://github.com/EvgenJin/REVN_project


Solution

  • You should probably just use push on the array.

    this.$socket.on('test', message => {
        this.objects.push(message)
    }) 
    

    Since in the HTML you're expecting an array of objects.