Discuss anything related to web development but no technical support questions


Post by ali.khan3@sjrb.ca »

Hello Support,

https://bryntum.com/examples/scheduler/frameworks/vue/javascript/vue-renderer/dist/

Following above example we are trying to render a custom VUE component in our scheduler header using the headerRenderer method.

The issue is: The component does not render and instead displays [object, object]

In AppConfig.js

 columns: [
        {
            type  : 'resourceInfo',
            text  : 'Staff',
            field : 'name',
            width : 150
        },
        {
            text                 : 'Button<br /><small>Vue Component</small>',
            width                : '10em',
            align                : 'center',
            field                : 'city',
            editor               : false,
            htmlEncodeHeaderText : false,
            vue                  : true,
            headerRenderer({record}) {
                return {
                    is : 'Button',
                    record
                };
            },
            renderer({ record }) {
                // The object needed by the wrapper to render the component
                return {
                    // Required. Name of the component to render.
                    // The component must be registered globally in main.js
                    // https://vuejs.org/v2/guide/components.html#Dynamic-Components
                    is : 'Button',

                // `Button` gets its text from `record`
                record

                // Any other properties we provide for the Vue component, e.g. `value`.
            };
        }
    }
],

Code is attached for your reference.

Attachments
Code.zip
(892.55 KiB) Downloaded 103 times

Post by tasnim »

It’s not fully supported. We have feature request to add that https://github.com/bryntum/support/issues/2777 and an example of a workaround how to achieve that in this forum post viewtopic.php?f=52&t=17342&p=86026#p86026 It’s for React, but the approach is the same for all frameworks, because on the side of our components - it’s always pure JS.

In other words, you need to return tags, not config, since renderer expects to have HTML code as a result. Custom Elements (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) is the way to do that for Vue components too.
https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue

Best regards,
Tasnim


Post Reply