콘텐츠가있는 구성 요소를 Vue-grid-layout의 GridItem에 전달하는 방법은 무엇입니까?

Question

Layout []의 해시 값에서 GridItems에 내용을 전달하는 방법을 이해하도록 도와주세요.

GridItem.i는 GridItem의 키 값이라고 생각합니다. 그러나 그에 따라 셀의 "컨텐츠"컴포넌트를 링크하는 방법은 무엇입니까?

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

면책 조항 : 저는 vue-grid-layout 제작자입니다.

격자 항목은 슬롯을 사용하여 내용을 추가하므로 격자 항목에서 사용할 때 v-html이 제대로 작동하지 않는다고 생각합니다. 그냥 이런 식으로 작업을 수행합니다

<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> 

바이올린 : https://jsfiddle.net/gmsa/jw2mmmpq/1/ 대신

Answer 2

그것은 당신이 같은 것을 사용한다는 것을 보이는

이 방법은 비 작업입니다 :

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

Answer 3

알아 내기가 힘들어 조금 진행되었습니다. 그러나 이것은 완전한 대답이 아닙니다. 문제 item 구성 요소의 내부 자식이 html이 아닌 string으로 구문 분석되고 있습니다.

도움이된다면 도움이 될 것입니다.

여기가 바이올린입니다. https://jsfiddle.net/srinivasdamam/ev88z5qs/