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

Posted 2023-02-23

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

【英文标题】：VueJS - mouse event doesn't work if element is placed inside Vue app div

【发布时间】：2018-01-06 18:09:05

【问题描述】：

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

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

我观察到一个奇怪的行为：如果我的 datetimepicker 放在 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>

【参考方案1】：

$('#datetimepicker1').datetimepicker(); 执行时，#datetimepicker1 不存在，因为 vue 还没有完成对模板的解析。

在 vue 中初始化 datetimepicker 的正确方法是在 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>

【讨论】：

太好了，非常感谢！日历现在每次都显示。现在我唯一的问题是 @change 和 v-model 不适用于 datetimepicker 输入。我现在正试图弄清楚。绑定的 v-model 变量保持为空。

没问题。也许您应该在新问题中发布您的新问题。

似乎 datetimepicker 使用 jQuery 事件，而不是原生事件。所以每次更改我都必须手动更新vue数据，我不能使用v-model

是的.. 还有一个包装 datetimepicker 的 vue 组件。 haixing-hu.github.io/vue-datetime-picker

是的，我看到了。不幸的是，它需要你使用 node.JS，我对此一无所知