Я не получаю никаких результатов с помощью v-for в моем проекте Vue

Question

Я сделал приложение, в котором пользователи могут писать комментарии на странице профиля друг друга, но у меня проблемы с выводом комментариев. Я не получаю никаких ошибок в консоли, но даже если я использую 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>

Answer 1

Я никогда раньше такого не видел, но я скопировал ваш код, чтобы сделать фрагмент, и заметил красную точку между фигурными скобками, как на картинке ниже.

Я заменил их на {{и вроде сработало. Я включил приведенный ниже фрагмент с версией с красной точкой и без нее.

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>