eventRender $el.popover is not defined for vue

[Altamill]

    <full-calendar
        id="calendar"
        ref="calendar"
        :event-sources="eventSources"
        @event-selected="eventSelected"
        @event-created="eventCreated(true, $event)"
        @event-resize="eventResize"
        @event-drop="eventResize"
        @event-render="eventRender"
        :config="config">
    </full-calendar>

    eventRender(event, $el, element) {
        console.log($el,element);
        $el.popover({
           title: event.title,
           content: event.description,
           trigger: 'hover',
           placement: 'right',
           container: 'body'
        });
    },

emm, I want popover but console : $el.popover is not defined. vue / elementui What do I need to do?thanks~

[BrockReece]

Is this how you programmatically initialise the elementui popover? I have not been able to find any reference to the technique you are using in their docs?

[Altamill]

My requirement is to display Popover when my mouse moves to the event of the calendar. I operated according to #25, but I was wrong.

        config: {
            eventRender(event, element, $el) {
                console.log(event,element,$el);
                $(element).popover({
                    html: true,
                    container: '.fc-scroller',
                    placement: 'auto right',
                    title: event.title,
                    content: event.description,
                });
            },
                     }

console error：jQuery.Deferred exception: $(...).popover is not a function TypeError: $(...).popover is not a function

[BrockReece]

Sure but I think #25 is using the Bootstrap popover are you using that too?

[Altamill]

I tried to introduce bootstarp and I could see Popover in element. This shows that he is working normally, but when I am hover, it does not trigger any effect.

[BrockReece]

If you are using the code in your previous message, would you need to add 'trigger: 'hover', to the popover config? Also, whereas I am happy to help, I don't think this is an issue with this repo.

[Altamill]

            eventRender(event, element) {
                console.log(event,element);
                $(element).popover({
                    trigger: 'hover',
                    container: 'body',
                    placement: 'right',
                    title: event.title,
                    content: event.description,
                });
            },

EMM, I'm sorry. You can close this problem, but I may really need your help. Above is my current code. Thanks again

[BrockReece]

If you could replicate the issue in codesandbox I will take a look at that.

[Altamill]

Thank you for your help! First did not introduce bootstartp.css can not display popover, this is the problem of z-index Secondly, bootstarp.css will overwrite the original style. My solution is to copy the popover related style to its own file. Finally, the code is posted below for easy access to the same partner (eventRender). Thank you very much for your help!

    <full-calendar
        id="calendar"
        ref="calendar"
        :event-sources="eventSources"
        @event-selected="eventSelected"
        @event-created="eventCreated(true, $event)"
        @event-resize="eventResize"
        @event-drop="eventResize"
        @event-render="eventRender"
        :config="config">
    </full-calendar>

        methods： {
    eventRender(event, element) {
        if (event.caltype == '会议') {
            let title = event.title.split(']')[1];
                        let room = event.title.split('[')[1].split(']')[0];
                        let start = event.start._i.split(':')[0] + ':' + event.start._i.split(':')[1];
                        let end = event.end._i.split(' ')[1].split(':')[0] + ':' + event.end._i.split(' ')[1].split(':')[1]
                        let time = start + '-' + end;
            let line = '<br /><hr color="#E9E9EB" size="1" />';
            $(element).popover({
                html: true,
                trigger: 'hover',
                container: 'body',
                placement: 'auto right',
                title: title,
                content: room + line + time + line + event.slave + line + event.description,
            });
        } else {
                        let start = event.start._i.split(':')[0] + ':' + event.start._i.split(':')[1];
                        let end = event.end._i.split(' ')[1].split(':')[0] + ':' + event.end._i.split(' ')[1].split(':')[1]
                        let time = start + '-' + end;
            let line = '<br /><hr color="#E9E9EB" size="1" />';
            $(element).popover({
                html: true,
                trigger: 'hover',
                container: 'body',
                placement: 'auto right',
                title: event.title,
                content: time + line + event.description,
            });
        };
       },
        }