VueJS - 要素がVueアプリ内に配置されている場合、マウスイベントは機能しませんdiv

Question

私のアプリケーションでは、bootstrap-datetimepickerライブラリを使用して、ウェブサイトに日付と時刻のピッカーが表示されます。

私はちょうど私のHTML（いくつかのdivと入力）にdatepickerを入れました。 また、すべてを初期化するスクリプトも追加しました。

私は奇妙な動作を観察しました：私のdatetimepickerがVue divの中に置かれていても動作しません！ （入力フィールドをクリックすると、カレンダーが表示されます）。 私がVue DIVの外にピッカーを置くと、それは完全に機能します。

一般的に、私はVueがマウスイベントをブロックしていることに気付きました.MegricsGraphics.jsライブラリ（グラフの描画用）と同じ問題がありました.Vue DIV内に置くと、マウスのホバーイベントはまったく機能しません。私はVueの外に置かなければならなかった。

その理由は何ですか？ datetimepickerの場合は、Vueの機能を使用したいので、Vueの外に置くことはできません。

私は任意のコードが含まれていませんでしたが、基本的に、これは動作しません：

<div> 
    <div id="vue-app"> 
     <!-- DATE_TIME PICKER: --> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker1'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    <div> 
<div> 

<script type="text/javascript"> 
    $(function() { 
     $('#datetimepicker1').datetimepicker(); 
    }); 
</script> 

そして、これは動作します：

<div> 
    <div id="vue-app"> 

    <div> 

    <!-- DATE_TIME PICKER: -->   
    <div class="form-group"> 
     <div class='input-group date' id='datetimepicker1'> 
      <input type='text' class="form-control" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
<div> 

<script type="text/javascript"> 
    $(function() { 
     $('#datetimepicker1').datetimepicker(); 
    }); 
</script> 

Answer 1

時$('#datetimepicker1').datetimepicker();実行し、#datetimepicker1が存在しないため、 vueはテンプレートの解析を完了していません。

vue内でdatetimepickerを初期化する正しい方法は、mountedライフサイクルフックの中で行うことです。また、より多くの音を出すためにvue-ish、idの代わりにrefをDOM要素に使用できます。下記の例をご覧ください。

new Vue({ 
 
    el: '#vue-app', 
 
    mounted() { 
 
    let dt = this.$refs['datetimepicker1'] 
 
    $(dt).datetimepicker() 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 

 
<div> 
 
    <div id="vue-app"> 
 
     <!-- DATE_TIME PICKER: --> 
 
     <div class="form-group"> 
 
      <div class='input-group date' ref='datetimepicker1'> 
 
       <input type='text' class="form-control" /> 
 
       <span class="input-group-addon"> 
 
        <span class="glyphicon glyphicon-calendar"></span> 
 
       </span> 
 
      </div> 
 
     </div> 
 
    <div> 
 
<div>