Wie übergebe ich eine Komponente mit Inhalt an GridItem im Vue-Grid-Layout?

Question

Bitte helfen Sie zu verstehen, wie Sie einen Inhalt von Layout [] 's Hash-Wert an GridItems übergeben.

Ich denke, dass GridItem.i ein Schlüsselwert für GridItem ist. Aber wie wird die "content" -Komponente für eine Zelle entsprechend verknüpft?

Auf diese Weise ist nicht arbeit:

html:

<grid-item v-for="item in layout" 
       :x="item.x" 
       :y="item.y" 
       :w="item.w" 
       :h="item.h" 
       :i="item.i"> 
      {{item.c}} 
</grid-item> 

js:

let a = `<item>There I want div from component</item>`; 

Vue.component('item', { 
    props: [], 
    template: `<div>Primer</div> 
    ` 
}); 

var testLayout = [ 
    {"x":0,"y":0,"w":2,"h":2,"i":"1","c":"content1"}, 
    {"x":2,"y":0,"w":2,"h":4,"i":"2","c":"<item>There I want div from component</item>"},  
    {"x":4,"y":0,"w":2,"h":5,"i":"3","c":a}, 
]; 

var GridLayout = VueGridLayout.GridLayout; 
var GridItem = VueGridLayout.GridItem; 

new Vue({ 
    el: '#app', 
    components: { 
     GridLayout, 
     GridItem, 
    }, 
    data: { 
     layout: testLayout, 
    }, 
}); 

https://jsfiddle.net/L2oh62tp/3/

Answer 1

Haftungsausschluss: Ich bin der vue-Raster-Layout-Autor.

Das Rasterelement verwendet einen Slot, um Inhalte hinzuzufügen, daher glaube ich nicht, dass v-html bei Verwendung auf Rasterelementen ordnungsgemäß funktioniert. Tun Sie es einfach so:

<grid-item v-for="item in layout" 
       :x="item.x" 
       :y="item.y" 
       :w="item.w" 
       :h="item.h" 
       :i="item.i"> 
      <div v-html="item.c"></div> 
</grid-item> 

Geige: https://jsfiddle.net/gmsa/jw2mmmpq/1/

Answer 2

Es sieht aus wie, dass Sie so etwas verwenden:

<grid-item v-for="item in layout" v-html="item.c"></grid-item> 

Answer 3

Bei dem Versuch, das herauszufinden, machte ich ein paar Fortschritte. Aber das ist keine vollständige Antwort. Problem Ich bin hier konfrontiert ist die innere Kinder von item Komponente werden als Zeichenfolge nicht als HTML analysiert.

Wenn jemand hilft, wäre nützlich.

Hier ist die Geige. https://jsfiddle.net/srinivasdamam/ev88z5qs/