VueJS - 如果元素放置在 Vue 应用程序中，则鼠标事件不起作用 div

Question

在我的应用程序中，我想使用 bootstrap-datetimepicker 库，它可以让您在网站上有一个日期和时间选择器。

我只是将日期选择器放在我的 HTML 中（一些 div 和输入）。我还添加了初始化整个东西的脚本。

我观察到一个奇怪的行为：如果我的日期时间选择器放在 Vue div 中，它不起作用！（当我单击输入字段时，应显示日历）。当我把选择器放在 Vue 之外时 DIV 它工作得很好。

一般来说，我注意到 Vue 会阻止鼠标事件，我在 MetricsGraphics.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 中初始化日期时间选择器的正确方法是在 mounted 生命周期钩子中进行。此外，为了让它听起来更 vue-ish，您可以在 DOM 元素中使用 ref 而不是 id。查看下面的示例。

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>

VueJS - 如果元素放置在 Vue 应用程序中，则鼠标事件不起作用 div

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

html

vue.js

mouseevent

vuejs2

bootstrap-datetimepicker