[Vuejs]-I am not getting any output using v-for in my Vue project

by

0👍

I’ve never seen this before, but I copied your code to make a snippet and noticed a red dot between the curly brackets like the picture below.

Red dot in curly brackets

I replaced them with {{ and it seemed to work. I’ve included the snippet below with and without the red dot version.

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>

Leave a comment