时间戳

首页 > 解决方案 > 如何在 v-for nativescript vue 内部刷新

vue.js - 如何在 v-for nativescript vue 内部刷新

问题描述

我正在尝试为我的应用程序制作聊天功能。为了显示消息，我对所有消息都有一个 v-for 循环。但是当我添加一条消息时，它不会显示在页面上。

在模板中使用 v-for 模型，如下所示。

     <WrapLayout v-for="(message, index) of getMessages" v-bind:key="index">
      <StackLayout  class="chat-box-content">
        <Label
          class="text-content body"
          textWrap="true"
          :text="message.message"
        />
      </StackLayout>
    </WrapLayout>

在 v-for 模型中，我从计算方法 getMessages() 中获取消息。添加消息时，会显示控制台日志“已添加消息”。所以计算方法看到添加了一条消息，但它没有显示在我的页面上。

computed: {   
 getMessages() {
  let messages;
  let chats = store.getters.getChats;
  chats.forEach((element) => {
    if (element.chatId === this.chatId) {
      console.log("message added")
      messages = element.messages;
    }
  });
  return messages;
},

我从 store.ts 中收到消息。消息是聊天的一部分。

export interface IChat {
chatId: string,
lastMessage: string,
timestamp: string,
senderName: string,
members: [{
    userId: string,
    name: string
}],
messages: [{
    message: string,
    sender: string,
    timestamp: string,
}],

}

更新：

所以显然我的 v-for 在添加消息时会重新加载，但不是在我第一次访问页面时。

有人知道问题可能是什么吗？

标签： vue.jsnativescriptpage-refreshv-for

解决方案

您能否检查计算属性getMassages是否具有您期望的结构？看起来你假设它 [{message:"hello"}, ...]是正确的？请添加更多代码以提供更好的上下文。

推荐阅读