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?

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?

• javascript
• node.js
• socket.io
• vue.js

Share Improve this question Follow asked Apr 5, 2017 at 13:37 MerkisLMerkisL 11533 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

Just in case if anyone else is stuck on the same problem, The "this" keyword here is referring to the parent of the Socket function. Hence before declaring the socket listener, store this in some other variable.

let self = this; and then use self.items.push