在我的 Vue 项目中使用 v-for 没有得到任何输出

Posted 2023-02-23

【中文标题】在我的 Vue 项目中使用 v-for 没有得到任何输出

【英文标题】：I am not getting any output using v-for in my Vue project

【发布时间】：2020-08-22 12:18:57

【问题描述】：

我制作了一个应用程序，用户可以在彼此的个人资料页面上编写 cmets，但我在输出 cmets 时遇到问题。我在控制台中没有收到任何错误，但即使我使用 v-for，我在屏幕上得到的输出是 comment.from 和 content.from 。所以我没有得到实际数据。 我似乎找不到错误。

cmets 出现在我的 Firestore 数据库中，它们也出现在控制台日志中。

这是我项目这一部分的组件。

<template>
    <div class="view-profile container">
        <div v-if="profile" class="card">
            <h2 class="deep-purple-text center">  profile.alias 's Wall</h2>
            <ul class="comments collection">
        <li v-for="(comment, index) in comments" :key="index"> 
       <div class="deep-purple-text"> ‌ comment.from  </div> 
       <div class="grey-text text-darken-2"> ‌ comment.content  </div>
       </li>
            </ul>
            <form @submit.prevent="addComment">
                <div class="field">
                    <label for="comment">Add Comment</label>
                    <input type="text" name="comment" v-model="newComment">
                    <p v-if="feedback" class="red-text center"> feedback </p>
                </div>
            </form>
        </div>
    </div>
</template>
<script>
import db from '@/firebase/init'
import firebase from 'firebase'
export default 
    name: 'ViewProfile',
    data()
        return
            profile: null,
            newComment: null,
            feedback: null,
            user: null,
            comments: []
        
    ,
    created()
        let ref = db.collection('users')

        ref.where('user_id', '==', firebase.auth().currentUser.uid).get()
        .then(snapshot => 
            snapshot.forEach(doc => 
                this.user = doc.data(),
                this.user.id = doc.id
            )
        )

        ref.doc(this.$route.params.id).get()
        .then(user => 
            this.profile = user.data()
        )

        db.collection('comments').where('to', '==', this.$route.params.id)
        .onSnapshot((snapshot) => 
        snapshot.docChanges().forEach(change => 
            if(change.type == 'added')
                this.comments.unshift(
                    from: change.doc.data().from,
                    content: change.doc.data().content
             )
            
          )
        )
    ,
    methods: 
        addComment()
            if(this.newComment)
                this.feedback = null
                db.collection('comments').add(
                    to: this.$route.params.id,
                    from: this.user.id,
                    content: this.newComment,
                    time: Date.now()
                ).then(() => 
                    this.newComment = null
                )
             else 
                this.feedback = 'Please enter a comment'
            
        
    

</script>

【问题讨论】：

您确定您的comments 已填充吗？

你安慰过你的comments吗？

是的，我做到了。 cmets 毫无问题地出现在我的 Firestore 数据库中。我只是无法让它们显示在页面本身上。我试过console.log（this.cmets）。在控制台中，我得到了[…, …, …, …, …, …, …, …, __ob__: Observer] 和 INSIDE，我可以看到 cmets 就好了。

【参考方案1】：

我以前从未见过这种情况，但我复制了你的代码来制作一个 sn-p，并注意到大括号之间有一个红点，如下图所示。

我用 替换了它们，它似乎有效。我在下面包含了带和不带红点版本的 sn-p。

new Vue(
  el: "#app",
  name: 'ViewProfile',
  data() 
    return 
      profile: null,
      newComment: null,
      feedback: null,
      user: null,
      comments: []
    
  ,
  created() 
    this.profile = 
      alias: "Test"
    ;
    this.comments = [
      from: "Test",
      content: "Test"
    ];
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <div class="view-profile container">
    <div v-if="profile" class="card">
      <h2 class="deep-purple-text center">  profile.alias 's Wall</h2>
      <ul class="comments collection">
        <li v-for="(comment, index) in comments" :key="index">
          <div class="deep-purple-text"> ‌ comment.from  </div>
          <div class="grey-text text-darken-2"> ‌ comment.content </div>

          <div class="deep-purple-text">  comment.from  </div>
          <div class="grey-text text-darken-2">  comment.content  </div>
        </li>
      </ul>
    </div>
  </div>
</div>

【讨论】：

这确实成功了。我想知道为什么那些点在那里？无论如何，它现在可以工作了 =)

我不知道，它似乎只出现在 comment.from 和 comment.content 括号中，而不是 feedback 括号中。这可能与编码有关。