bowersbros solution to toolbar buttons

toolbar-button.md

<template>
    <div class="flex w-full justify-end items-center">
        <template v-if="hasButtons">
            <component 
                v-for="button in hasButtons" :key="button.id" :is="'detail-' + button.component" :field="button"/>
        </template>
        <template v-else>
            <div />
        </template>
    </div>
</template>

<script>
import _ from 'lodash';

export default {
    props: ['resource', 'resourceName', 'resourceId'],
    computed: {
        hasButtons() {
            var buttons = [];

            var fields = _.toArray(JSON.parse(JSON.stringify(this.resource.fields)))

            fields.forEach(field => {
                if (field.component === 'button') {
                    buttons.push(field);
                }
            })

            return _.toArray(buttons);
        }
    }
}
</script>

Vue.component('custom-detail-toolbar');