VueJS - mouse event doesn't work if element is placed inside Vue app div

Question

In my application, I'd like to use bootstrap-datetimepicker library, which lets you have a date and time picker on the website.

I just put the datepicker in my HTML (some divs and input). I also added the script that initializes the whole thing.

I observed a strange behaviour: if my datetimepicker is placed inside Vue div, it doesn't work! (when I click on the input field, the calendar should be displayed). When I put the picker outside of Vue DIV it works perfectly.

Generally, I noticed that Vue blocks mouse events, i had the same issue with MetricsGraphics.js library (for drawing graphs) - if i put it inside Vue DIV, mouse hover events do not work at all. i had to put it outside of Vue.

What's the reason for that? In case of datetimepicker, I can't put it outside of Vue, because I'd like to use Vue capabilities on it.

I didn't include any code, but basically, this doesn't work:

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

And this works:

<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

At the time $('#datetimepicker1').datetimepicker(); executes, #datetimepicker1 does not exist because vue hasn't finished parsing the template.

The correct way to initialize your datetimepicker within vue is to do it inside mounted lifecycle hook. Also, to make it sound more vue-ish, you could use a ref to your DOM element instead of an id. Check out the example below.

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>