javascript - Firestore 仅显示来自文档的消息

Question

我试图只显示用户从文档输入的消息。显示文档的代码是这样的：

<v-list-item>
            <v-list-item v-for="message in task" v-bind:key="message"> 
      <v-chip color="primary" class="sent">{{message}}</v-chip>
    </v-list-item>

 <v-container class="messagebox">
      <v-row>
        <v-col cols="12">
          <v-text-field
            v-model="message"
            rounded
            filled
            outlined
            dense
            label="Message"
            append-icon="mdi-send-circle"
            @click:append="addTask"
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>

这从 firebase 获取信息，这是我必须将数据发送到 firebase 的代码

<script>
import { db } from "@/main";
export default {
  data: () => ({
    message: null,
    task: []
  }),
  mounted() {
    this.getTask();
  },
  methods: {
    scrollToEnd() {
      var chatbox = document.querySelector("#chatbox");
      chatbox.scrollTop = chatbox.scrollHeight - chatbox.clientHeight;
    },
    async getTask() {
      let snapshot = await db.collection("test").get();
      let task = [];
      snapshot.forEach(doc => {
        let appData = doc.get('message');
        task.push(appData);
      });
      this.task = task;
    },
  async addTask() {
    if (this.message != "") {
      await db.collection("test").add({
          message: this.message
        });
        this.getTask();
        this.message = "";
    }
  }
  }
};
</script>

但是，当我运行我的代码时，我得到 [ {"hi"}]，而不仅仅是 "hi"

标签： javascripthtmlvue.jsgoogle-cloud-firestore

Answer 1

最简单的方法是将视图中数据的显示方式更改为：

<li v-for="msg in message">
  <v-chip color="primary" class="sent" style="display.block">{{ msg.message }}
</li>