[Vuejs]-How to call/initlialize a vue method from outside of the Vue APP

by

0👍

If you assign the component to a variable. You can call the methods on that variable. In fact, you can access other properties of vue from that variable (ex: refs, data).

Try the snipet below:

var app = new Vue({
  el: "#app",
  data() {
    return {
      isActive: false,
    }
  },
  computed: {
    isBurgerActive() {
        return this.isActive ? 'active':'inactive'
    }
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive;
    }
  },
})

document.getElementById('btn').addEventListener("click", function() {
	app.toggle();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div>
  <button id="btn">
    Click Me
  </button>
</div>

<div id="app">
  <h2>Active: {{ isBurgerActive }}</h2>
</div>

Leave a comment