请帮助理解如何将内容从 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,
},
});
最佳答案
免责声明:我是 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>
关于vue.js - 如何将带有内容的组件传递给 Vue-grid-layout 中的 GridItem?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42379819/