Как создать динамически теги в HTML с помощью Vue.js?

Question

[Наталья Чобот]

Есть такая функция в js.js:

function viewPosts(){
    $.getJSON("http://localhost:3000/posts", function (obj) {
        $.each(obj, function (key, value) {
            var app = new Vue({
                el: '#app',
                data: {
                    title: value.title,
                    subtitle: value.subtitle,
                    date: value.datePostCreate,
                    text: value.text
                }
            });
    });
});

Вот что есть в index.html:

<div id="app">
                <p>{{ title }}</p>
                <p>{{ subtitle }}</p>
                <p>{{ date }}</p>
                <p>{{ text }}</p>
            </div>

Как сделать так чтобы для каждого нового поста создавалась своя разметка?
Не исключено, что нужно исправить и js.js и index.html. С Vue.js только познакомилась, не знаю всех особенностей.

Answer 1

[Artem0071]

Вы немного не то делаете

var app = new Vue({
                el: '#app',
                data: {
                    title: value.title,
                    subtitle: value.subtitle,
                    date: value.datePostCreate,
                    text: value.text
                }
            });

Этот кусок у вас инициализирует Vue. Поэтому не нужно его прогонять несколько раз

Вот каркас для вашего приложения

<div id="app">
               
</div>
var app = new Vue({
                el: '#app'
            });

Идем дальше

Во вью создайте метод mounted() - он инициализируется при загрузке

mounted(){
 // ....
}

Вот там где // .... и пишите ваш код

А для того чтобы блоки повторялись, есть специальный метод v-for

В итоге, я так полагаю, у вас должно получиться что то в этом роде:

<div id="app">
  <div v-for="item in items">
     <p>{{ item.title }}</p>
     <p>{{ item.subtitle }}</p>
     <p>{{ item.date }}</p>
     <p>{{ item.text }}</p>
  </div>
</div>

var app = new Vue({
                el: '#app',
                data: {
                    items: [];            //здесь будет массив с вашими данными
                },
                mounted(){
                     this.$http.get("http://localhost:3000/posts")          // это использует vue-router. можно и по другому, но как по мне это самый удобный способ
                                   .then(res => {
                                        this.items = res.body         // здесь заносим ваши данные в массив
                                   })
            });

В общем приблизительно так это должно выглядеть