Как передать компонент с контентом в GridItem в Vue-grid-layout?

Question

Пожалуйста, помогите понять, как передать контент в GridItems из значения хеша макета Layout [].

Я думаю, что 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> 

ЯШ:

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 использует слот для добавления контента, поэтому я не думаю, что v-html корректно работает при использовании элемента grid. Просто сделай это так:

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

Answer 2

Похоже, что вы должны использовать что-то вроде этого:

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

Answer 3

Попытка понять это, я сделал небольшой прогресс. Но это не полный ответ. Проблема, с которой я сталкиваюсь здесь, - это внутренние дочерние элементы компонента item, которые обрабатываются как строка не как html.

Если кому-то поможет, было бы полезно.

Вот скрипка. https://jsfiddle.net/srinivasdamam/ev88z5qs/