Jarvis Widget inside a VueJS Component

508 Views Asked by At

I am working on a Laravel 5.7 application, that has a view with a Jarvis Widget [http://data.edwardsaquifer.org/widgets.php] inside of a VueJS component. However, I can't seem to get the Jarvis widget to function while wrapped within the Vue Component.

I have narrowed the issue down to the widget being wrapped inside of the Vue instance element.

new Vue({
    el: '#prospectsApp'
});

When the jarvis widget is wrapped inside of the Vue element instance (#prospectsApp), is breaks all functionality of the widget.

<div id="prospectsApp">
    <section id="widget-grid">
        <div class="row">
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
                <div class="jarviswidget jarviswidget-sortable" id="wid-id-0" role="widget">
                    <header class="ui-sortable-handle">
                        <div class="widget-header"> 
                            HEADER
                        </div>
                    </header>

                    <!-- widget div-->
                    <div role="content">
                        <!-- widget content -->
                        <div class="widget-body">
                            CONTENT
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </section>
</div>

However when I move the element instance inside of the widget content, the functionality works again...

<section id="widget-grid">
    <div class="row">
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
            <div class="jarviswidget jarviswidget-sortable" id="wid-id-0" role="widget">
                <header class="ui-sortable-handle">
                    <div class="widget-header"> 
                        HEADER
                    </div>
                </header>

                <!-- widget div-->
                <div role="content">
                    <!-- widget content -->
                    <div class="widget-body">
                        <div id="prospectsApp">
                            CONTENT
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </div>
</section>

Do I need to pass something into the Vue instance in order to keep the functionality of the widget intact?

0

There are 0 best solutions below