Vue 2 Laravel 5.3 vue-toastr

Question

  

注意：如果您没有，请参阅建议答案的评论   找到代码中的任何缺陷或没有出现控制台日志错误。

任何人都有vue-toastr的经验请帮助以下。我按照here的说明进行操作。似乎在以下代码

之后正确读取了js（我猜）

import VueToast from 'vue-toast'

这是我第一次将css导入Vue组件。做了一些研究，我认为我有vue-loader应该包括vue-style-loader作为提及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>