Question

我正在使用套接字从远程服务器接收数据。

我正在使用以下应用Vue组件：

let app = {
 name: 'app',
 data: {
  dataStore: {}
 },
 mounted () {
  var vm = this;
  socket.on('data-receive', (data) => { //data = {user: 'myUser' value: 45}
   vm.dataStore[data.user] = data.value // also tried Vue.set(vm.dataStore, data.user, data.value)
   console.log(vm.dataStore)
  })
 }

奇怪的是，控制台按预期正确记录dataStore。甚至Vue Developer Tools也会显示dataStore中存储的正确数据。但是，dataStore在以下HTML上呈现为{}

<app>
{{dataStore}}
</app>

以下是所呈现的内容：

{}

无论如何强制重新渲染？

Answer 1

尝试以下：

mounted () {
  var vm = this;
  socket.on('data-receive', (data) => { 
   Vue.set(vm.dataStore, 'user', data.user)   // or vm.$set(...)
   Vue.set(vm.dataStore, 'value', data. value)
   console.log(vm.dataStore)
  })
}

如documentation：

中所述

Vue无法检测属性添加或删除。由于Vue在实例初始化期间执行getter / setter转换过程，因此数据对象中必须存在一个属性，以便Vue转换它并使其被激活

可以使用Vue.set(object, key, value)方法将反应属性添加到嵌套对象：

编辑：

正如评论中所建议的那样，由于代码在套接字中，这可能发生在vue实例之外，并使用forceUpdate在HTML中呈现更新的变量。

在VueJS中使用套接字观察对象？

1 个答案:

编辑：