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

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

레이아웃 []의 해시 값에서 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/

면책사항:저는 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>

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

다음과 같은 것을 사용해야 할 것 같습니다.

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

이것을 알아내려고 열심히 노력하면서, 나는 약간의 진전을 보았다.하지만 이것은 완전한 답은 아니다.내가 지금 직면한 문제는 내면의 아이들이야item컴포넌트가 html이 아닌 문자열로 해석되고 있습니다.

누가 도와주면 도움이 될 거야.

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

언급URL : https://stackoverflow.com/questions/42379819/how-to-pass-component-with-content-to-griditem-in-vue-grid-layout