将 socket.io（客户端）JSON 传递给 Vue.js 组件

Question

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.

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')
    })
  }
})

<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>

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

Any help would be greatly appreciated. Thanks.

Answer 1

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: []
  }
 },