针对 post 发表评论

Question

我使用 v-for 渲染了所有 post，但现在我想为每个添加一个评论部分。我不知道如何在评论和 post 之间建立联系。正如您在代码中看到的那样，评论部分为所有 post 卡片呈现，但它如何特定于每个 post？（我不确定逻辑以及如何实现它）。

<template>
  <div v-for="item in userList" :key="item.uid">
    <div class="row q-py-xs">
      <q-card flat class="bg-grey-3 full-width user-card">
        <q-card-section>
          <div class="text-body1 q-ma-xs" id="postDtls">
            {{ item.postDetails }}
          </div>
          <div class="row q-gutter-sm">
            <q-chip square>
              <q-avatar icon="home" color="amber-10" text-color="white" />
              {{ item.postAddress }}
            </q-chip>
          </div>
        </q-card-section>
        <q-card-section> </q-card-section>
        <q-card-section>
          <q-input
            outlined
            id="cmInput"
            v-model="cmOffer"
            class="bg-grey-1"
            color="amber-10"
            label-slot
            clearable
          >
          
            <template v-slot:label>
              <span class="text-weight-bold text-deep-orange">write</span>
              your comment
            </template>
            <template v-slot:append>
              <q-btn
                round
                flat
                icon="move_to_inbox"
                v-on:click="submitComment()"
              />
            </template>
          </q-input>
          <q-btn push dense class="full-width q-my-xs" color="amber-10" label="send message directly" />
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { db } from "src/boot/firebase";
import { collection, query, where, getDocs } from "firebase/firestore";
import { doc, setDoc } from "firebase/firestore";

export default {
  setup() {
    return {
      userList: ref([]),
      cmList: ref([]),
      idList: ref([]),
      cmOffer: ref("")
    };
  },
  async created() {
    const querySnapshot = await getDocs(collection(db, "post"));
    const postCm = await getDocs(collection(db, "post"));
    querySnapshot.forEach(doc => {
      let docData = doc.data();
      this.userList.unshift(docData);
    });
    postCm.forEach(doc => {
      let cmData = doc.data();
      this.cmList.unshift(cmData);
    });
  },
};
</script>

Answer 1

您可以为每个 post 创建评论数组，然后相应地更新它们。请查看以下代码段：

const { ref } = Vue
const app = Vue.createApp({
  setup () {
    const userList = ref([{uid: 1, postDetails: 'post 1', postAddress: '1', comments: ['comment 1', 'comment 2']}, {uid: 2, postDetails: 'post 2', postAddress: '2', comments: []}])
    const cmOffer = ref([])
    const submitComment = (id, i) => {
      userList.value = userList.value.map(user => {
        if(user.uid === id) {
          user.comments.push(cmOffer.value[i])    
        }
        return {...user}
      })
      cmOffer.value = []
    }
    return { userList, cmOffer, submitComment }
  }
})

app.use(Quasar)
app.mount('#q-app')

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.4.13/dist/quasar.prod.css" rel="stylesheet" type="text/css">

<div id="q-app">
  {{ userList }}
  <div v-for="(item, idx) in userList" :key="item.uid">
    <div class="row q-py-xs">
      <q-card flat class="bg-grey-3 full-width user-card">
        <q-card-section>
          <div class="text-body1 q-ma-xs" id="postDtls">
            {{ item.postDetails }}
          </div>
          <div class="row q-gutter-sm">
            <q-chip square>
              <q-avatar icon="home" color="amber-10" text-color="white" />
              {{ item.postAddress }}
            </q-chip>
          </div>
        </q-card-section>
        <q-card-section> 
          <div class="text-body1 q-ma-xs" v-for="(comment, i) in item.comments" :key="i" >
            {{ comment }}
          </div>
        </q-card-section>
        <q-card-section>
          <q-input outlined id="cmInput" v-model="cmOffer[idx]" class="bg-grey-1" color="amber-10" label-slot clearable>
            <template v-slot:label>
              <span class="text-weight-bold text-deep-orange">write</span>
              your comment
            </template>
            <template v-slot:append>
              <q-btn round flat icon="move_to_inbox" @click="submitComment(item.uid, idx)" />
            </template>
          </q-input>
          <q-btn push dense class="full-width q-my-xs" color="amber-10" label="send message directly" @click="submitComment(item.uid, idx)" />
        </q-card-section>
      </q-card>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.4.13/dist/quasar.umd.prod.js"></script>

针对 post 发表评论

Make comment specific to post

javascript

vue.js

quasar-framework

vuejs3