2017-02-12 147 views
1

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 2 Laravel 5.3 vue-toastr

任何人都有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

圓形支架編輯後,我試了一下,但仍然沒有彈出。但每次我點擊按鈕,它似乎在控制檯日誌中沒有任何錯誤提取的東西。請幫忙! Network

EDIT#2

從下面的圖像。看起來vue-toast正在被閱讀,並且頁面中有toastr的元素。每次點擊按鈕時,vue-toast的div都會更新,但是從頁面上看不到任何東西。

enter image description here

回答

3

你有一個語法錯誤:this.$refs.toast.showToast['hihi']。 您想通過使用圓括號而不是方括號來調用方法showToastthis.$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> 
+0

感謝您的答覆@aristidesfl。它似乎沒有錯誤仍然沒有發生在頁面上...... – warmjaijai

+0

你可以創建一個jsbin,或共享整個代碼? – aristidesfl

+0

謝謝你的幫助。這實際上是我的.vue的完整代碼,你需要我的項目的其他部分? jsbin不知道如何運行它對不起... ...因爲我實際上在我的項目 – warmjaijai