CODEWITHSUNDEEP
jqueryvue.js
Andrew B
Andrew B

Reputation: 343

Vue.js ^2.3.3 can't use jquery ^2.2.4 events with document?

I have a legacy application in Magento 1.x where jQuery is already used everywhere. I have been told to build an interactive calendar widget for displaying delivery prices on their estimated delivery date and I figured Vue.js would be a good use for this. I don't want to rebuild entire pages in Vue.js, I just want to make a nice calendar component that can be re-used in 3 different views. I have already made the component, and it looks useful.

I have a vue-cli webpack-simple setup going right now for my dev environ.

What I want to do is send JSON data returned from an API (all done OUTSIDE of Vue.js) and pass it to my Vue.js component so it can be rendered on the calendar

What I have been attempting to do is use 

mounted() {

  this.$nextTick(function() {

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

      console.log('in handler of vue');

    });

  });

},

inside my Vue.js component and from outside vue have something like 

<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>

What I noticed is that upon clicking the button, the 'inside button click' gets logged but nothing else happens after that. I noticed that the 'in nextTick attaching handler inside vue' gets logged right before the 'in document ready'.

Is there a more Vue.js way to do this that I'm just not aware of? All the google searching I have done has turned up something along the lines of do it from inside mounted(), make it part of your vue instance, or no that won't work I don't currently have the time or resources to re-write the user form (which is the current source of the event) and the many other parts of the Magento Template in Vue.js, I was hoping to just put in this nice calendar and send data we can already retrieve to it Here's what the calendar looks like so far Do you have any suggestions? Here is the github

Upvotes: 1

Views: 222

Answers (1)

Bert
Bert

Reputation: 82459

Honestly probably the easiest way to do this is something like this.

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/[email protected]/dist/vue.js"></script>
<div id="app">
  Calendar Data: {{calendarData}}
</div>

<button id="fireOff">Get Calendar Data</button>

All the code is doing here is capturing the Vue object in a variable. Once you have that, you can access any of its properties, call its methods, whatever, from outside of Vue. Because Vue is reactive, when you change it's data, it will update it's DOM.

I should note, since you mention you are using webpack, that if you take this approach you will likely have to expose the variable that contains the Vue on the window. The reason being webpack will wrap all of it's code in a closure. The way you would do this is like this:

window.calendar = new Vue(...)

Upvotes: 0

Related Questions