从普通脚本在 Vue 中捕获事件

Question

我有一个普通的 javascript 文件可以初始化一些 bootstrap/jquery 库。

function reinitialize() {
    jQuery('.js-datepicker').add('.input-daterange').datepicker({
        weekStart: 1,
        autoclose: true,
        todayHighlight: true
    });
}

export {reinitialize}

然后我在 Vue 中调用重新初始化方法：

<script>
    import {reinitialize} from "../../helpers/app";

    export default {
        mounted() {
           reinitilize();   
        }
    }
</script>

现在，我正试图捕捉日期选择器何时在我的 vanilla js 中发生变化，我可以像这样触发：

    jQuery('.js-datepicker').add('.input-daterange').datepicker({
       //...
    }).change(function() {
        alert('do smt');
    });

但是，在我的 Vue 代码中使用它，它没有捕获更改事件：

mounted() {
   $('body').find('.input-daterange').change(function () {
        alert("X");
   })
}

然后我尝试做类似的事情：

    jQuery('.js-datepicker').add('.input-daterange').datepicker({
       //...
    }).change(dateChanged);

   mounted() {
      function dateChanged() {  alert("X")  }
   }

但是，Vue 会抛出找不到 dateChanged 的错误。

克服这个问题的方法是什么？

Answer 1

大部分代码都很好。只是 return 函数中的组件：

function reinitialize() {
    // RETURN STATEMENT IS IMPORTANT
    return jQuery('.js-datepicker').add('.input-daterange').datepicker({
        weekStart: 1,
        autoclose: true,
        todayHighlight: true
    });
}

export { reinitialize };

在你的 Vue 组件中：

<script>
    import { reinitialize } from "../../helpers/app";

    export default {
        mounted() {
           reinitialize().on('changeDate', function handler() {});   
        }
    }
</script>

最好将事件处理程序放在 Vue 组件中。不要依赖 DOM 查询来再次查找元素。这是一种不好的做法。

从普通脚本在 Vue 中捕获事件

Catching event in Vue from vanilla script

javascript

jquery

bootstrap-datepicker

vue.js