Уведомление Vue-Snotify не отображается

Question

Я должен реализовать библиотеку Vue-Snotify для отображения уведомлений в проекте Vue.js.

Примечание: У меня нет предварительного опыта работы с Vue.js!Я только что получил это задание, и оно должно быть выполнено.

Я поиграл с проектом и попробовал разные подходы, которые заставили меня немного лучше понять Vue.js, но после стольких попыток,Я не знаю, как это исправить: (

home.js

import Snotify from 'vue-snotify'
Vue.use(Snotify)

var vmHome = new Vue({
    ...
    components: {
        myFancyComponent,
        ...
    }
})

myFancyComponent.vue

<template>
  <div>
    <button type="button" @click="showNotif">Show</button>
    <vue-snotify></vue-snotify>
  </div>
</template>

<script>
  module.exports = {
    name: "my-fancy-component",
    methods: {
        showNotif: function() {
        console.log(this.$snotify.success('Example body content'))
      }
    },
    ...
  }
</script>

Я могу вызвать метод уведомления, и он даже возвращает мне действительный объект - без ошибок! Но без следа уведомления.

SnotifyToast {id: 338737384058, title: null, body: "Example body content", config: {…}, eventEmitter: Vue$3, …}

Хотя я заметил ошибку в консоли на страницепервая загрузка:

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'emitter' of undefined"

found in

---> <VueSnotify>
       <MyFancyComponent>
         <Root>

TypeError: Cannot read property 'emitter' of undefined
    at VueComponent.created

Интересно, почему тег VueSnotify оборачивает компонент MyFancyComponent, а не наоборот?

Answer 1

Кажется, вы неправильно указали тип данных methods, это должен быть объект, а не массив.

module.exports = {
  name: "my-fancy-component",

//---------v--- This part
  methods: {
    showNotif: function() {
      console.log(this.$snotify.success('Example body content'))
    }
  },
  ...
}