Vue.js plugin error : undefined

Question

I am trying to use a plugin from GodofBrowser, as stated but I am getting an error

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

so this.$plugin is undefined .... why ?

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

Then I am trying to use it in my App.vue, on 'click' method :

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>

Possible duplicate of [VueJS: why is "this" undefined?](https://stackoverflow.com/questions/43929650/vuejs-why-is-this-undefined) — thanksd, Oct 24 '17 at 13:22

score 2 · Accepted Answer · edited Jul 15 '22 at 23:06

This is a common stumbling block with Vue applications - you can find the following in the official Vue documentation:

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.

Try using a normal function instead:

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')
      })
    }
  }

methods: {clicked: async function (event){event.preventDefault();}} — Sheece Gardazi, Feb 03 '20 at 12:36

score 2 · Answer 2 · answered Oct 24 '17 at 13:12

2

Should use : Vue.prototype , not this !

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

answered Oct 24 '17 at 13:12

Vue.js plugin error : undefined

2 Answers2