VueJS Mixins Methods Direct Call

user_7106868 0
Viewed 15749

I'm testing Mixins on VueJS and I have a question. Is there a way to call an event directly from a Mixins without having to assign it in my methods?

MyMixins.js

import Vue from 'vue'

Vue.mixin({
    methods: {
        Alerta(){
            alert('WORK!')
        }
    }
})

app.vue

<template>
   <button v-on:click="AlertaInterno">test</button>
</template>
<script>
   export default{
         methods:{
            AlertaInterno(){
            this.Alerta()
         }
      }
   }
</script>

The code above works. I was wondering how I could invoke the mixin function directly, something like this:

app.vue

<template>
   <button v-on:click="this.Alerta()">test</button>
</template>

Thanks!

vuejs2 vue-component vue.js mixins
1 Answers

Yes, you can call it directly. Methods from the mixin are merged with the Vue or component they are "mixed in" with. They can be called the same way as any other method.

console.clear()

const Mixin = {
  methods:{
    Alerta(){
      alert("WORK!")
    }
  }
}

new Vue({
  mixins: [Mixin],
  el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
 <button @click="Alerta">Alert!</button>
</div>

user_380650
Related