VueJS onclick on appended element

Question

Can anyone suggest how to make an appended dynamic element clickable on VueJS?

The tooltip button is not triggering the vuejs popAlert methods.

const myVue = new Vue({
    el: '#vue',
    methods: {
        popAlert: function() {

            alert('clicked');

        }
    }
});

$(function() {

    $('#calendar').fullCalendar({
            defaultDate: '2017-10-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
                {
                    title: 'All Day Event',
                    start: '2017-10-01'
                },
                {
                    title: 'Long Event',
                    start: '2017-10-07',
                    end: '2017-10-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2017-10-09T16:00:00'
                },
            ],
            eventRender: function(event, element, view) {

                let htmlText = `<div class="ui tooltip">
                            <h3>Tooltip title</h3>
                            <button type="button" class="ui mini button" @click="popAlert">Delete</button>
                    </div>`;

                $(element).popup({
                            inline: false,
                            on: 'click',
                            exclusive: true,
                            hoverable: true,
                            html: htmlText,
                            context: '#vue',
                    });
            }
        });

});

https://codepen.io/tonoslfc/full/bomqWR/

You are mixing jquery and vue, Vue does'nt compile templates added by jquery. try using this Vue plugin instead: github.com/Wanderxx/vue-fullcalendar — Tomer
– Tomer, Commented Oct 15, 2017 at 14:04
@fatman the calendar works fine, its the popup semantic-ui tooltip "delete" button is calling the popAlert method — tonoslfx
– tonoslfx, Commented Oct 15, 2017 at 14:07
Of course, because you add the template via jquery, so Vue does not compile it, use the Vue plugin instead. In general, try to avoid mixing Jquery and vue, usually you'll find a Vue specific plugin that matches the Jquery plugin — Tomer
– Tomer, Commented Oct 15, 2017 at 14:08

Bsalex · Accepted Answer · 2017-10-15 23:48:23Z

2

You can wrap your htmlText inside another Vue component, copying parent methods and then $mount this component inside the popup in it's onCreate.

Look at my pen for details https://codepen.io/bsalex/pen/EwdQEy

answered Oct 15, 2017 at 23:48

Bsalex

2,9701 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS onclick on appended element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related