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"

Answer 1

Самый простой способ - изменить способ отображения данных в вашем представлении на:

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