时间戳

首页 > 解决方案 > Vue-Snotify 通知未显示

javascript - Vue-Snotify 通知未显示

问题描述

我必须实现库 Vue-Snotify 以在 Vue.js 项目中显示通知。

注意： 我没有使用 Vue.js 的经验！我刚接到这个任务，需要完成。

我已经玩过这个项目并尝试了不同的方法，这让我对 Vue.js 有了更好的理解，但是在尝试了这么多之后，我不知道如何解决这个问题:(

主页.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 而不是相反？

标签： javascriptvue.jsvuejs2

解决方案

看来您的methods数据类型错误，它需要是一个对象而不是数组。

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

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

推荐阅读