Vue.js ^2.3.3 不能将 jquery ^2.2.4 事件与文档一起使用吗？

Question

我在Magento 1.x中有一个遗留应用程序，其中jQuery已经在任何地方使用。我被告知要构建一个交互式日历小部件，用于显示预计交货日期的交货价格，我认为 Vue.js 将是一个很好的用途。我不想在 Vue.js 中重建整个页面，我只想制作一个可以在 3 个不同视图中重复使用的漂亮日历组件。我已经制作了该组件，它看起来很有用。

我现在有一个vue-cli webpack-simple设置，适用于我的开发环境。

我想做的是发送从 API 返回的 JSON 数据(全部在 Vue.js 之外完成)并将其传递给我的 Vue.js 组件，以便它可以在日历上呈现。

我一直试图做的是使用

mounted() {
this.$nextTick(function() {
console.log('in nextTick attaching handler inside vue');
$(document).on('shipping', (e) => {
console.log('in handler of vue');
});
});
},

在我的 Vue.js 组件内部和从 Vue 外部有类似的东西

<div id="app"></div>
<script src="/dist/build.js"></script>
<button id="fireOff">Get Shipping</button>
<script>
$(document).ready(function() {
console.log('in document ready');
$('#fireOff').on('click', function() {
console.log('inside button click');
$(document).trigger('shipping');
});
});
</script>

我注意到的是，单击按钮后，"内部按钮单击">会被记录，但之后不会发生任何其他事情。我注意到"vue 中的 in nextTick 附加处理程序"在"文档就绪">之前被记录下来。

有没有我不知道的更多 Vue.js 方法来做到这一点？我所做的所有谷歌搜索都发现了一些东西，比如从 mounted() 内部做，让它成为你的 vue 实例的一部分，或者不，这不起作用我目前没有时间或资源来重写用户表单(这是事件的当前来源)和 Vue.js 中 Magento 模板的许多其他部分， 我希望只是放入这个漂亮的日历并发送我们已经可以检索到的数据 这是到目前为止日历的样子 你有什么建议吗？这是 github

Answer 1

老实说，最简单的方法可能是这样的。

console.clear()
const calendar = new Vue({
el:"#app",
data:{
calendarData: null
}
})
$(function(){
$("#fireOff").click(function(){
calendar.calendarData = [1,2,3]
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
Calendar Data: {{calendarData}}
</div>
<button id="fireOff">Get Calendar Data</button>

代码在这里所做的只是在变量中捕获 Vue 对象。一旦你有了它，你就可以访问它的任何属性，调用它的方法，无论如何，从 Vue 之外。因为 Vue 是反应式的，所以当你改变它的数据时，它会更新它的 DOM。

我应该注意，既然你提到你正在使用 webpack，如果你采用这种方法，你可能不得不在window上公开包含 Vue 的变量。原因是 webpack 会将其所有代码包装在一个闭包中。执行此操作的方式是这样的：

window.calendar = new Vue(...)