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>