0

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

EvgenJin
  • 206
  • 2
  • 7

1 Answers1

0

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.

Indyz
  • 321
  • 3
  • 7
  • Thanks. I did so, but when I re-do send () with other parameters (dates filter) , the array is not updated, and new entries are added at the end. Perhaps you need to clear the array – EvgenJin Mar 26 '18 at 12:26
  • Solved.in server side cursor.toArray((err,message) instead cursor.each((err, message). work greats by this.objects = message – EvgenJin Mar 26 '18 at 19:04