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-стиль-загрузчик как упоминание here (правильное, если я ошибаюсь), и я использовал следующий код для импорта вю-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

После круглого редактирования кронштейна, я попробовал это, но до сих пор ничего не выскочило. Но каждый раз, когда я нажимаю кнопку, он, кажется, извлекает вещи без ошибок в консольном журнале. Пожалуйста помоги!

РЕДАКТИРОВАТЬ # 2

С изображении ниже. Кажется, что vue-toast читается, и на странице есть элемент тоста. И каждый раз, когда я нажимаю на кнопку, есть обновление в div vue-toast, но ничего не видно на странице.

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>