[Vuejs]-Vue.js ^2.3.3 can't use jquery ^2.2.4 events with document?

by

0👍

✅

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/vue@2.2.6/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(...)
👤Bert

Leave a comment