添加vue組件動態

Question

我在我的 php 應用程序中有一個自定義 vue 組件和一個視圖，它為它呈現一個自定義元素。

<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事件之后，我將組件添加到主 vue 實例，如下所示：

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

所以，我有一組組件，但它們都已經呈現在頁面上。

問題是如何向頁面添加另一個文章組件？

我認為我可以使用沒有模板的組件，並在主應用程序准備好時將數據推送到主應用程序，但對我來說這看起來有點奇怪。 所以，我想也許有更好的解決方案。

Answer 1

您需要使用 Vue 來執行 for 循環，而不是您的服務器模板語言：

<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) %}

  }

}