Rendern einer Liste von verschiedenen Komponententypen in Vue

Question

Ich habe eine Liste von Objekten. Jedes Objekt enthält ein Feld type, das verwendet wird, um die Komponente zu bestimmen, die gerendert werden muss. Für paragraph müsste Typ I beispielsweise eine Komponente mit dem Namen Paragraph rendern. Ich habe ungefähr ein Dutzend dieser verschiedenen Komponententypen.

Im Moment durchlaufe ich die Liste in Javascript. Ich erstelle ein Div mit einer zufälligen ID und ersetze dieses durch eine Vue-Komponente, die ich manuell unter Verwendung von new [ComponentType]({ el: ... }) erstelle. Dies erfordert jedoch eine DOM-Manipulation. Gibt es einen besseren Weg, der keine manuelle Manipulation der DOM-Struktur erfordert? v-for oder ähnlich?

Answer 1

Ja, es gibt einen besseren Weg. Verwenden Sie Dynamic Components.

Hier ist ein Beispiel in diesen Dokumenten.

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>