Добавить компонент vue dymanic

Question

У меня есть пользовательский компонент vue и представление в моем php-приложении, которое отображает для него настраиваемый элемент.

<div class="articles"> 
    {% for a in articles %} 
    <budget-article id="{{ a.id }}" name="{{ a.name }}" :amount="{{ a.amount }}" :enable="true"></budget-article> 
    {% endfor %} 
</div> 

После ready событий добавить компонент к основному примеру ви, как это:

ready: function() { 
    this.$parent.articles.push(this); 
} 

Итак, у меня есть массив компонентов, но все они уже оказали на странице.

Вопрос в том, как я могу добавить еще одну статью-страницу на страницу?

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

Answer 1

Вы должны использовать Vue сделать для цикла, а не ваш сервер язык шаблона:

<div class="articles"> 
    <budget-article v-for="article in articles" id="{{ article.id }}" name="{{ article.name }}" :amount="{{ article.amount }}" :enable="true"></budget-article> 
</div> 

Тогда каждый раз, когда articles массив получает толкнул, новая статья появится.

Для первоначального добавления статей на страницу, вы должны сделать что-то вроде этого (псевдо код, потому что я не знаю, что язык шаблона):

data:function(){ 

    return { 

    articles: {% json_encode(articles) %} 

    } 

}