Question

与此问题类似here我正在尝试将socket.io-client数据传递给Vue.js组件，但它没有显示在页面上 - 尽管它写入console.log就好了。我的数据是JSON（他是一个数组）所以上面链接中的解决方案似乎不起作用。

我得到的错误是：
[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>

样本数据

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

非常感谢任何帮助。感谢。

Answer 1

vue实例中的ENV LATITUDE "-121.464" ENV LONGITUDE "36.9397" ENV SENSORID "sensor1234" ENV ZIPCODE "95023" ENV INTERVAL "3" ENV GOOGLE_CLOUD_PROJECT "snappy-premise-118915" ENV GOOGLE_APPLICATION_CREDENTIALS "/app/key.json" ENV GRPC_GO_LOG_SEVERITY_LEVEL "INFO"属性需要是一个返回某些内容的函数，例如您的data数组。所以代替

items

您应将其重写为

    data: {
      items: []
     },

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

1 个答案: