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はこれがVueのコンポーネントにCSSをインポートするための私の最初の時間である次のコード

import VueToast from 'vue-toast' 

後（私が推測する）適切に読み込まれているようです。研究のビットを行なったし、私は（私が間違っている場合は、正しい）言及hereとしてVUEスタイル・ローダーが含まれなければならないVUE-ローダーを持っていると思うし、私は輸入VUE-toastrのCSS

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

に次のコードを使用ページをロードしてボタンをクリックしますが、トーストが表示されず、コンソールログのエラーも表示されません。私はここに私のコードのフルバージョンを添付し、助けてください。

<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> 

EDIT 1

丸括弧編集した後、私はそれを試してみましたが、まだ何もポップアップしません。しかし、私がボタンをクリックするたびに、コンソールログに何の誤りもない状態で取得されているようです。助けてください！下の画像から

EDIT＃2

。 vue-toastが読まれているようで、実際にページにトーストの要素があります。そして、私がボタンをクリックするたびに、vue-toastのdivに更新がありますが、ページからは何も観察できません。

Answer 1

あなたは構文エラーがあります：this.$refs.toast.showToast['hihi']。 メソッドshowToastを呼び出すには、角括弧の代わりにかっこを使用します（this.$refs.toast.showToast('hihi')）。

全コード：あなたの応答@aristidesflため

<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>