Passing socket.io data to vuejs

Question

I have an issue with passing socket.io data to vuejs element. I went through Vue documentation few times and I couldn't find solution for this. Basically, I have a data that's being sent to client via socket.io and console.log prints it perfectly. Now I wanted to use Vue to render html elements with that data, however I have an issue with passing my socket.io data to it.

In Vue documentation there's an example how to do it with static data input.

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

So I figured out that I need to convert my data object to string for this. I used JSON.stringify() for this.

var socket = io.connect('http://192.168.1.10');
socket.on('posts', function (datasocket) {
  var st = JSON.stringify(datasocket);
  var blogposts = new Vue({
    el: '#blogpost',
    data: {
      items: st
    }
  })
});

And HTML

  <div id="blogpost">
    <div v-for="item in items" class="card" style="width: 20rem;">
      <div class="card-block">
        <h4 class="card-title">{{ item.post_title }}</h4>
        <p class="card-text">{{ item.post_excerpt }}</p>
        <a href="{{ item.post_link }}" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>

However, Vue doesn't seem to render anything. In my console when I do console.log on st, I get output:

{"content":[{"post_title":"Post title 1","post_excerpt":"Post excerpt 1","post_link":"/post/1"},{"post_title":"Post title 2","post_excerpt":"Post excerpt 2","post_link":"/post/2"},{"post_title":"Post title 3","post_excerpt":"Post excerpt 2","post_link":"/post/3"}]}

So any idea how to correctly pass this data to VueJS?

Answer 1

You should put your socket connection into one of the lifecycle hook - for your case mounted() should work.

    var socket = io.connect('http://192.168.1.10');
    var blogposts = new Vue({
        el: '#blogpost',
        data: {
          items: []
        },
        mounted: function() {
          socket.on('posts', function(datasocket) {
            this.items.push(datasocket.content)
          }.bind(this))
        }

    })

Note: If you use arrow syntax, then you don't have to bind this

mounted: function() {
   socket.on('posts', datasocket => {
     this.items.push(datasocket.content)
   })
}

Btw: I don't think you need to use JSON.stringify