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

请帮助理解如何从Layout []的散列值将内容传递给GridItems。如何将内容传递给Vue-grid-layout中的GridItem？

我认为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/

来源

2017-02-21 Dima Fomin

免责声明：我是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/

来源

2017-04-06 15:12:59 Gus

感谢您的快速响应！ – Mick

看起来，你必须使用这样的事情：

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

来源

2017-02-22 11:12:37

为了弄清楚这一点，我取得了一些进展。但这不是一个完整的答案。问题我在这里面临的是item组件的内部孩子正在被解析为字符串而不是html。

如果有人帮助会有用。

这是小提琴。 https://jsfiddle.net/srinivasdamam/ev88z5qs/

来源

2017-02-22 12:12:27

代替'<成分：是= “item.k”> {{item.c}）'，使用'V-html'参数：'' – euvl

它重写模板。 @yev –

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

回答

相关问题