Vue 2 Laravel 5.3 vue-toastr

Question

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式装载机作为提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

圆形支架编辑后，我试了一下，但仍然没有弹出。但每次我点击按钮，它似乎在控制台日志中没有任何错误提取的东西。请帮忙！

EDIT＃2

从下面的图像。看起来vue-toast正在被阅读，并且页面中有toastr的元素。每次点击按钮时，vue-toast的div都会更新，但是从页面上看不到任何东西。

Answer 1

你有一个语法错误：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>