Vue 元素未在隱藏模式上加載

Question

我正在嘗試將 Vue 組件顯示到由語義 ui 控制的模態上，但是，vue 元素未加載/安裝。 我主要使用 Laravel & JQuery 和一些 vue 元素。

我懷疑這是由於在加載 vue 元素之前隱藏了模態，但我不確定在顯示模態時如何重新渲染 vue 元素？

如果我在帶有display: block的普通頁面上使用相同的代碼，該元素將正常顯示。

加載刀片組件：

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

應加載元素的刀片組件：

@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

視圖模板：

<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');