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.

Anyone has experience on vue-toastr please help on the following. I follow the instruction on here. seems that the js is being read properly (I guess) after the following code

import VueToast from 'vue-toast'

This is my first time to import css into Vue component. Did a bit of research and I think I have vue-loader which should includes vue-style-loader as mention here (correct if i am wrong) and I used the following code to import vue-toastr css

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

I load the page and click on the button but no toastr is shown, nor any console log errors. I herewith attach the full version of my codes below and please help.

<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

After the round bracket edit, I tried it but still nothing popped up. But everytime I click the button it seems fetching things without any errors in console log. Please help!

EDIT#2

From the image below. It seems that the vue-toast is being read and there is actually element of the toastr in the page. And everytime I click on the button there is update in the div of vue-toast but nothing can be observed from the page.

Answer 1

You have a syntax error: this.$refs.toast.showToast['hihi']. You want to call the method showToast by using parenthesis instead of square brackets: this.$refs.toast.showToast('hihi').

Full code:

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