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>

我注意到，点击按钮后，'inside button click' 会被记录下来，但之后没有任何反应。我注意到 'in nextTick 在 vue 中附加处理程序' 被记录在之前 'in document ready'。

有没有更多我不知道的 Vue.js 方法来做到这一点？我所做的所有谷歌搜索都出现了类似 do it从mounted()内部，让它成为你的vue实例的一部分，或者不，这不起作用我目前没有时间或资源在 Vue.js 中重新编写用户表单（这是事件的当前来源）和 Magento 模板的许多其他部分，我希望只是放入这个漂亮的日历并将我们已经可以检索到的数据发送给它@ 987654321@您有什么建议吗？ Here is the 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 是 reactive，所以当你改变它的数据时，它会更新它的 DOM。

我应该注意，由于您提到您使用的是 webpack，如果您采用这种方法，您可能必须在 window 上公开包含 Vue 的变量。 webpack 的原因是将其所有代码包装在一个闭包中。你会这样做的方式是这样的：

window.calendar = new Vue(...)