There's something about this Vue lifecycle that has me scratching my head. Let me simplify it as best I can.
I've got a custom button component whose size is controlled by a flex grid container setup like this:
<template>
<div class="component d-flex flex-column flex-grow-1" style="min-height: 0">
<div class="justify-center align-content-center"
style="display: grid; width: 100%; height: 100%; grid-gap: 1rem;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(8, minmax(0, 1fr));">
<slot/>
</div>
</div>
</template>
The grid panel structure resembles this:
<template>
<v-card :style="cardStyle" v-bind="$attrs">
<slot></slot>
</v-card>
</template>
<script>
export default {
computed: {
cardStyle: function() {
return 'grid-column: span ' + (this.columns || 2) +
'; grid-row: span ' + (this.rows || 2) + ';';
}
},
props: {
columns: [Number, String],
rows: [Number, String],
}
}
</script>
My button utilizes the panel for sizing in this manner:
<template>
<grid-panel ref="elm" :columns='columns || 2' :rows='rows || 2' elevation="0">
<v-btn class="ma-0 align-stretch flex-column py-4"
width="100%" max-width="100%" height="100%" :color="color || 'rgba(0,0,0,0)"'>
<div class="d-flex fill-height py-2" style="width:100%">
<div ref="iconTest" class="fill-height">
<v-icon ref="icon" class="mb-0 flex-shrink-1 notransition py-0 pr-2" :color="iconColor" style="width:auto; height:auto">{{ icon }}</v-icon>
</div>
<div ref="text" class="flex-grow-1 d-flex align-center text-center">
<span ref="innerSpan" style="font-size: 1px" class="textFitted text-center d-inline-block notransition">
{{ label }}
</span>
</div>
</div>
</v-btn>
</grid-panel>
</template>
It may seem complicated, but hang tight.