Javascript 更新对象中的属性值时出现Vue反应性问题

我有一个聊天室应用程序，它通过套接字连接接收消息。消息结构是单个对象，它将消息保存在对象内部的聊天室数组中

问题是当收到消息时，它不会反应性地呈现到视图中。我必须重新渲染组件以获取更新的消息 消息变量位于组件数据中。Vuex未连接

我已尝试使用Vue.set将传入消息设置为变量

这是在收到消息时由套接字触发的函数

   addMessage(message){
      var chatMessage = JSON.parse(message.data)
      console.log(chatMessage)
      if(Boolean(this.messages[chatMessage.chatRoomId])){
        var allMessages = this.messages[chatMessage.chatRoomId];
        allMessages.push(chatMessage)
        Vue.set(this.messages, chatMessage.chatRoomId, allMessages)
      }
    },

这是渲染发生的地方

<li
      class="message"
      v-for="(message, index) in messages[activeChatRoom]"
      v-bind:key="message.id"
      v-bind:index="index"
      v-bind:title="message.msg"
>{{ message.message }}
</li>

{{message.message}}

通过单击事件更改活动聊天室

在此方面的任何帮助都将不胜感激

Vue.set的第二个参数必须是string或number，因此在我看来，只有set的目标只能嵌套一个级别。因此，我更改了第一个参数，它就工作了

我不知道更深层次的原因，你可以去看看Vue.set源代码

ps:Watch、vuex和$nextick也应该能够实现监控数据

单个domo：

    <template>
  <div class="hello">
    <p>{{msg.title.text}}</p>
  </div>
</template>

<script>
export default {
  name: 'problem',
  data(){
    return {
      msg:{
        title:{
          text:'test'
        }
      }
    }
  },
  mounted(){
    setTimeout(()=>{
      this.$set(this.msg.title,'text','haha')
      console.dir(this.msg)
    },2000)
  }
}
</script>

{{msg.title.text}

导出默认值{
名称：“问题”，
数据（）{
返回{
味精：{
标题：{
文本：“测试”
}
}
}
},
安装的（）{
设置超时（（）=>{
this.$set（this.msg.title、'text'、'haha'）
console.dir（this.msg）
},2000)
}
}

this.messages是数据属性吗？如果是，则没有理由使用vue.set。Vue.set将属性添加到要拾取以重新渲染的反应集。如果您只是将消息添加到消息列表中，为什么不执行此操作。messages.push（newmessage）？感谢您的评论。我也试过了。但不渲染到视图。在开发工具中，它显示消息被存储。但不渲染到视图。所以我就试试这个。但是什么也没发生：/等等，那么您是否将这些存储在Vuex中？您没有提供足够的数据信息。抱歉。我将编辑这个问题。Vuex未链接。只有一个包含数据的组件您提到，

messages

是在

data

中声明的，但是您什么时候在聊天室数组中添加？它们是最初存在的还是随后添加的？您发布的所有内容都让我认为，由于添加了属性，这些数组本身并不是被动的。因此，

allMessages.push（chatMessage）

正在推送到一个非反应性数组，下面一行上的

Vue.set

调用不会有帮助，因为

Vue.set

只会在属性不存在时增加反应性。