如何將內容傳遞給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？

回答

相關問題