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>

Ikbel · Accepted Answer · 2017-07-31 09:18:46Z

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>

Great, thank you very much! Calendar now shows each time. Now my only issue is the fact that @change and v-model do not work on datetimepicker input. I'm trying to figure it out now. Bound v-model variable stays null. — Loreno, Commented Jul 31, 2017 at 9:58
No problem. Maybe you should post your new issue in a new question. — Ikbel, Commented Jul 31, 2017 at 10:11
It seems that datetimepicker uses jQuery events, not native ones. So I have to update vue data manually on each change, i can't use v-model — Loreno, Commented Jul 31, 2017 at 10:25
Yes.. there's also a vue component that wraps datetimepicker. haixing-hu.github.io/vue-datetime-picker — Ikbel, Commented Jul 31, 2017 at 10:27
Yes, I saw it. Unfortunately it requires you to use node.JS, which I have no idea about — Loreno, Commented Aug 1, 2017 at 6:49

Collectives™ on Stack Overflow

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

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related