NOTE: Please refer to the comment on the suggested answer if you failed to find any flaw in your codes or no console log error appeared.

任何有 vue-toastr 经验的人请帮助解决以下问题。我按照 here 上的说明进行操作.似乎在以下代码之后 js 被正确读取(我猜)

import VueToast from 'vue-toast' 

这是我第一次将 css 导入到 Vue 组件中。做了一些研究，我想我有 vue-loader，它应该包括提到的 vue-style-loader here (如果我错了，请更正)并且我使用以下代码导入 vue-toastr css

import '!!vue-style-loader!css-loader!vue-toast/dist/vue-toast.min.css' 

我加载页面并单击按钮，但没有显示 toastr，也没有任何控制台日志错误。我特此附上我的代码的完整版本，请帮忙。

<template> 
    <div> 
    <button @click.prevent="toastIt">Click</button> 
    <vue-toast ref='toast'></vue-toast> 
    </div> 
</template> 
 
<script> 
  import '!!vue-style-loader!css-loader!vue-toast/dist/vue-toast.min.css' 
  import VueToast from 'vue-toast' 
  export default { 
    components:{ 
      'vue-toast': VueToast, 
    }, 
    data(){ 
      return{ 
        user:{}, 
        shop:{} 
      } 
    }, 
    props:[ 
    ], 
    created(){ 
    }, 
    mounted(){ 
    }, 
    updated(){ 
    }, 
    methods:{ 
      toastIt(){ 
        this.$refs.toast.showToast['hihi'] 
      } 
    }, 
    computed:{ 
 
    } 
  } 
</script> 

编辑 1

在圆括号编辑之后，我试过了，但仍然没有弹出任何内容。但每次我点击按钮时，它似乎在控制台日志中没有任何错误地获取东西。请帮忙!

编辑#2

来自下图。看起来正在读取 vue-toast 并且页面中实际上有 toastr 的元素。每次我点击按钮时，vue-toast 的 div 中都会有更新，但从页面上看不到任何内容。

请您参考如下方法:

你有语法错误:this.$refs.toast.showToast['hihi']。 您想通过使用圆括号而不是方括号来调用方法 showToast:this.$refs.toast.showToast('hihi')。

完整代码:

<template> 
    <div> 
    <button @click.prevent="toastIt">Click</button> 
    <vue-toast ref='toast'></vue-toast> 
    </div> 
</template> 
 
<script> 
  import '!!vue-style-loader!css-loader!vue-toast/dist/vue-toast.min.css' 
  import VueToast from 'vue-toast' 
  export default { 
    components:{ 
      'vue-toast': VueToast, 
    }, 
    data(){ 
      return{ 
        user:{}, 
        shop:{} 
      } 
    }, 
    props:[ 
    ], 
    created(){ 
    }, 
    mounted(){ 
    }, 
    updated(){ 
    }, 
    methods:{ 
      toastIt(){ 
        this.$refs.toast.showToast('hihi') 
      } 
    }, 
    computed:{ 
 
    } 
  } 
</script>