时间戳

首页 > 解决方案 > 在我的 Vue 项目中使用 v-for 没有得到任何输出

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

问题描述

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

评论出现在我的 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>

标签： vue.jsvue-componentv-for

解决方案

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

大括号中的红点

我用 {{ 替换了它们，它似乎有效。我已经包含了下面有和没有红点版本的片段。

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>

推荐阅读