Vue.js Plugin-Fehler: undefined

Question

Ich versuche, ein Plugin von GodofBrowser zu verwenden, wie gesagt, aber ich erhalte eine Fehlermeldung

this.$dialog.confirm('Please confirm to continue') 
    Uncaught TypeError: Cannot read property 'confirm' of undefined 

so das $ Plugin nicht definiert ist .... warum.?

// I installed it via npm 
npm install vuejs-dialog 

main.js

// I imported it 
import Vue from "vue" 
import VuejsDialog from "vuejs-dialog" 

// and I told Vue to install it 
Vue.use(VuejsDialog) 

Dann versuche ich es in meinem App.vue zu verwenden, auf 'Klick' Methode:

App.vue

<template> 
     <div id="app" class="container"> 
     <ul class="navigation"> 
      <li id="home"><router-link :to="{ name: 'Home' }" >Home</router-link></li> 
      <li id="shoppinglists" v-if="!logged"> 
      <span @click.capture="clicked"> 
       <router-link :to="{ name: 'ShoppingLists' }" >Shopping Lists</router-link> 
      </span> 
      </li> 
      <li v-else id="shoppinglists"><router-link :to="{ name: 'ShoppingLists', params: { id: currentUserId } }" >Shopping Lists</router-link></li> 
     </ul> 
     <router-view></router-view> 
     </div> 
    </template> 

    <script> 
    import store from '@/vuex/store' 
    import { mapGetters } from 'vuex' 

    export default { 
     name: 'app', 
     methods: { 
     clicked: (event) => { 
      event.preventDefault() 
      console.log('clicked!'). // got it in console 
      this.$dialog.confirm('Please confirm to continue') // !ERROR 
      .then(function() { 
      console.log('Clicked on proceed') 
      }) 
      .catch(function() { 
      console.log('Clicked on cancel') 
      }) 
     } 
     }, 
     computed: { 
     ...mapGetters({ currentUserId: 'getCurrentUserId', logged: 'getLogged' }) 
     }, 
     store 
    } 
    </script> 

Answer 1

Dies ist ein häufiges Stolpern ck mit Vue Anwendungen - Sie folgende in dem official Vue documentation finden:

Don’t use arrow functions on an options property or callback, such as created:() => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()).

Since arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

Versuchen Sie es mit einer normalen Funktion statt:

methods: { 
    clicked: function (event) { 
     event.preventDefault() 
     console.log('clicked!'). // got it in console 
     this.$dialog.confirm('Please confirm to continue') // !ERROR 
     .then(function() { 
     console.log('Clicked on proceed') 
     }) 
     .catch(function() { 
     console.log('Clicked on cancel') 
     }) 
    } 
    } 

Answer 2

Sollte verwenden: Vue.prototype, das nicht!

Vue.prototype.$dialog.confirm('Please confirm to continue')