如何将带有内容的组件传递给 Vue-grid-layout 中的 GridItem？

Question

请帮助理解如何将内容从 Layout [] 的哈希值传递到 GridItems。

我认为 GridItem.i 是 GridItem 的键值。但是如何 link "content" 组件相应地为一个单元格呢？

这种方式行不通：

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

看起来你必须使用这样的东西：

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

Answer 2

苦苦思索，终于有了一点进展。但这不是一个完整的答案。我在这里面临的问题是 item 组件的内部子项被解析为字符串而不是 html.

如果有人帮助会很有用。

这里是fiddle。 https://jsfiddle.net/srinivasdamam/ev88z5qs/

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

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

如何将带有内容的组件传递给 Vue-grid-layout 中的 GridItem？

How to pass component with content to GridItem in Vue-grid-layout?

grid-layout

vue.js

vue-component

vuejs2