Блог

Я работаю над приложением на Laravel 5.7, которое имеет представление с виджетом Jarvis [http://data.edwardsaquifer.org/widgets.php ] внутри компонента VueJS. Однако, похоже, я не могу заставить виджет Jarvis функционировать, будучи заключенным в компонент Vue.

Я сузил проблему до виджета, обернутого внутри элемента экземпляра Vue.

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

Когда виджет jarvis помещается внутрь экземпляра элемента Vue (#prospectsApp), это нарушает всю функциональность виджета.

 <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>
  

Однако, когда я перемещаю экземпляр элемента внутри содержимого виджета, функциональность снова работает…

 <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>
  

Нужно ли мне передавать что-либо в экземпляр Vue, чтобы сохранить функциональность виджета нетронутой?