添加vue组件动态

Question

I have a custom vue component and a view in my php-application that render a custom element for it.

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

After a ready event I add component to a main vue instance like this:

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

So, I have an array of components but all of them have already rendered on a page.

The question is how can I add another article-component to the page?

I think that I could use a component without template and just push data to a main application when it ready but it looks a little bit weird for me. So, I think maybe there is a better solution.

Answer 1

You need to use Vue to do the for-loop, not your server template language:

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

Then anytime the articles array gets pushed to, a new article will appear.

To initially add the articles to the page, you should do something like this (pseudo code because I don't know that template language):

data:function(){

  return {

    articles: {% json_encode(articles) %}

  }

}