How to build a list after receiving an array via axios?

Question

JavaScript

I am just learning such a wonderful thing as Vue.js and for learning I started to transfer my personal project to it.
Now I have a page frame loaded, and then the lists of news and comments are already loaded on onload, and the page takes on a content view.
In Vue.js, I get a json array through the axios module. How then in some div to build a list by values ​​from an array.
Now I did it like this.

<ul>
          <li v-for="item in collection_news">
            <div class="overview-news-item">
              <div class="article-info">
                <div class="this-category-name" v-if="item.category">{{ item.category }}</div>
                <div class="this-author-name">{{ item.author.name }}</div>
                <div class="this-posted-time">{{ item.date }}</div>
                <div class="this-visits">{{ item.views }}</div>
              </div>
              <a class="this-news-link" :href="item.link">
                <h2 class="this-news-title">{{ item.title }}</h2>
                <p class="this-news-short">{{ item.description }}</p>
                <img v-if="item.image" class="this-news-image" :src="item.image">
              </a>
              <div class="article-augs">
                <div class="this-reply-count">{{ item.comments.count }}</div>
              </div>
            </div>
          </li>
        </ul>

But it infuriates me that these curly braces are shown first everywhere until the page is completely loaded. It's not beautiful.
Is there any other way to represent it?

Answer 1

v-cloak