I'm currently working on developing reusable components specifically for gridstack.
One issue I've encountered is the absence of a simple equivalent to the this.$compile method from vue 1.
I came across this example that caught my attention.
Here's the vue script I'm using:
export default {
components: {
'horizontal-fab': HorizontalFab,
'd-widget': DWidget
},
data () {
return {
}
},
mounted () {
var options = {
cellHeight: 80,
verticalMargin: 10,
width: 3
}
$('#grid-stack').gridstack(options)
},
addWid () {
var grid = $('#grid-stack').data('gridstack')
grid.addWidget('<d-widget></d-widget>', 0, 0, 1, 1, true)
},
addGraph () {
var grid = $('#grid-stack').data('gridstack')
grid.addWidget(`
<div class="grid-stack-item" data-gs-width="4">
<div class="grid-stack-item-content">
<p>HTML (added)</p>
</div>
</div>
`, 0, 0, 1, 1, true)
}
Below is the relevant html code:
<span @click="addGraph" >Line graph</span></li>
<span @click="addWid">Sparklines</span></li>
...
<div id="grid-stack" class="grid-stack grid-stack-3">
<d-widget data-gs-x="0" data-gs-y="0" data-gs-width="1" data-gs-height="1"></d-widget>
</div>
The core problem at hand:
The addGraph method functions flawlessly, while addWid encounters issues. Strangely enough, when directly inserted as a component in the HTML, it works fine.
My assumption is that the HTML content from the component isn't being precompiled. In vue1, this was resolved using compile.
Various attempts have been made:
Mount, recommended here, but due to not recognizing defined components, it didn't work.- I stumbled upon suggestions to make it work with
push, as seen here. However, my familiarity with vue is limited and implementing this approach poses challenges, especially considering different block types needing to be treated uniformly by gridstack. Additionally, the same component may appear multiple times within a board with varying parameters. - A method to compile a
standalone componenthas surfaced, mentioned here, yet it seems to be discouraged, hence seeking alternatives. - References to render functions were observed, unfortunately, my expertise level isn't sufficient to put them into practice.
To conclude, any insights or guidance on these methods, or perhaps suggestions for alternative implementations would be highly valued. It's crucial to consider the functionality of the gridstack script rather than simply inserting elements.
Thank you!
UPD: definition of d-widget:
This essentially represents a single component, delineated in a separate file labeled Widget.vue
<template>
<div class="grid-stack-item" data-gs-width="4">
<div class="grid-stack-item-content">
<p>Wiiidget! (added)</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>