在Vue中渲染不同組件類型的列表

我有一個對象列表。每個對象都包含一個type字段，用於確定需要呈現的組件。例如，對於paragraph類型，我需要渲染一個名爲Paragraph的組件。我大概有一打這些不同的組件類型。在Vue中渲染不同組件類型的列表

目前我在Javascript中循環訪問列表。我創建一個帶有隨機ID的div，並用我使用new [ComponentType]({ el: ... })手動創建的Vue組件替換它。但是，這需要DOM操作。有沒有更好的方法，不需要手動操縱DOM結構？ v-for或同類？

來源

2016-12-09 MikkoP

[v-for]（https://vuejs.org/v2/guide/list.html#v-for）+ [v-is]（https://vuejs.org/v2/guide /components.html#DOM-Template-Parsing-Caveats）？ – joaumg

是的，還有更好的方法。使用Dynamic Components。

下面是這些文檔中顯示的示例。

var vm = new Vue({ 
    el: '#example', 
    data: { 
    currentView: 'home' 
    }, 
    components: { 
    home: { /* ... */ }, 
    posts: { /* ... */ }, 
    archive: { /* ... */ } 
    } 
})  

<component v-bind:is="currentView"> 
    <!-- component changes when vm.currentView changes! --> 
</component>

來源

2016-12-09 20:49:53 Chris

我會在Stackoverflow警察通過之前添加一個快速代碼示例，並刪除您的答案。 –

在Vue中渲染不同組件類型的列表

回答

相關問題