CODEWITHSUNDEEP
javascriptnode.jsvue.jssocket.io
syntax
syntax

Reputation: 203

Pass socket.io (client) JSON to Vue.js Component

Similar to this question here I'm trying to pass socket.io-client data to a Vue.js component but it's not displaying on the page -- though it writes to console.log just fine. My data is JSON (his was an array) so the solution in the link above doesn't seem to work.

The error I'm getting is:
[Vue warn]: Property or method "items" is not defined on the instance but referenced during render.

main.js

import Vue from 'vue'
import App from './App'
import io from 'socket.io-client'

Vue.config.productionTip = false
var socket = io.connect('http://localhost:3000')

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  data: {
    items: []
  },
  mounted: function () {
    socket.on('connect', function () {
      socket.on('message', function (message) {
        console.log(message)
        this.items = message.content
      }.bind(this))
      socket.emit('subscribe', 'mu')
    })
  }
})

App.vue

<template>
  <div id="app">
    <h1>client</h1>
    <div v-for="item in items" class="card">
      <div class="card-block">
        <h4 class="card-title">Symbol: {{ item.symbol }}</h4>
        <p class="card-text">Updated: {{ item.lastUpdated }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

sample data

{  
   "symbol":"MU",
   "lastUpdated":1520283600000
}

Any help would be greatly appreciated. Thanks.

Upvotes: 2

Views: 417

Answers (1)

user74091
user74091

Reputation: 301

the data attribute in your vue instance needs to be a function which returns something, your items array for instance. so instead of 

    data: {
      items: []
     },

you should re-write as 

data () {
  return {
    items: []
  }
 },

Upvotes: 1

Related Questions