Question

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

我现在正在为我的开发环境设置一个 vue-cli webpack-simple 设置。

我想要做的是发送从API返回的JSON数据（全部在Vue.js外部完成）并将其传递给我的Vue.js组件，以便可以在日历上呈现 < / p>

我一直尝试做的是使用

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'中的nextTick附加处理程序中的'在之前正确记录'。

是否有更多的Vue.js方法可以做到这一点，我只是不知道？我所做的所有谷歌搜索都发现了一些基于做的事情从内部装入（），使其成为您的vue实例的一部分，或否则无法正常工作我目前没有时间或资源重写用户表单（这是事件的当前来源）和Vue.js中Magento模板的许多其他部分，我希望只是放入这个漂亮的日历并发送我们已经可以检索到它的数据{ {3}}你有什么建议吗？ Here's what the calendar looks like so far

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(...)

Vue.js ^ 2.3.3不能使用带有文件的jquery ^ 2.2.4事件？

1 个答案: