Vue元素未在隐藏模式上加载

Question

我试图将Vue组件显示到语义ui控制的模态上，但是，Vue元素没有加载/安装。我正在使用Laravel &JQuery主要与一些vue元素。

我怀疑这是由于模态被隐藏之前的vue元素被加载，但我不知道如何渲染vue元素时，模态显示?

如果我在一个正常的页面上使用相同的代码和display: block，元素会正常显示。

加载叶片组件:

@include('partials.forms.location',['name'=>'location', 'label'=>__(''),'style' => 'full'])

应该加载元素的Blade组件:

@component('partials.forms.form-group',['style'=>isset($style) ? $style : null,'label'=>$label, 'name'=>$name])
<drop-marker-map
data-name="{{ $name }}"
data-lat="{{ old($name) ? old($name)['lat'] : null  }}"
data-lng="{{ old($name) ? old($name)['lng'] : null }}">
</drop-marker-map>
@endcomponent

Vue模板:

<template>
<div class="drop-marker-map">
<p>Navigate to your location or find the correct address in the drop down box.</p>
<div class="map-wrapper">
<div class="map" ref="map"></div>
</div>
<div class="map-utilities">
<div class="ui grey basic button locate" @click="geoLocate">Find your location</div>
<div class="ui grey basic button maker" @click="placeMaker">Place Marker</div>
<div class="ui grey basic button clear-maker" @click="clearMaker" v-if="this.lat && this.lng">Clear Marker
</div>
<div class="ui grey basic button recenter" @click="recenter" v-if="this.lat && this.lng">Recenter Map</div>
</div>
<input type="hidden" :name="this.latName" v-model="this.lat">
<input type="hidden" :name="this.lngName" v-model="this.lng">
</div>
</template>

Answer 1

终于想通了。拦截模式'onShow'，并使用Vue重新渲染html内容。如果有更好的方法，我还是想听听。

$('#foundModal').modal({
onShow: function() {
const dropHtml = $('#map-container').html();
let res = window.Vue.compile(dropHtml);
new Vue({
render: res.render,
staticRenderFns: res.staticRenderFns
}).$mount('#map-container');
}
}).modal('show');