Vue 2 Laravel 5.3 vue-toastr

Posted 2023-02-23

【中文标题】Vue 2 Laravel 5.3 vue-toastr

【英文标题】：

【发布时间】：2017-06-30 06:29:45

【问题描述】：

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

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

在圆括号编辑后，我尝试了它，但仍然没有弹出。但是每次我单击按钮时，它似乎都在控制台日志中获取内容而没有任何错误。请帮忙！

编辑#2

从下图。似乎正在读取 vue-toast 并且页面中实际上存在 toastr 的元素。每次点击按钮时，vue-toast 的 div 中都会有更新，但从页面上看不到任何内容。

【参考方案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>

【讨论】：

感谢您的回复@aristidesfl。它似乎仍然没有错误，但页面上没有发生任何事情......

感谢您的帮助。这实际上是我的 .vue 的整个代码，您还需要我的项目的哪一部分？ jsbin 不知道如何运行它很抱歉...因为我实际上在我的项目中使用 laravel 5.4

请参考我的 EDIT#2，在我单击 div 已更新的按钮后，它似乎在后端工作。但是从页面上看不到任何东西。

对不起，这是我的愚蠢，我希望没有其他人会像我一样陷入这种愚蠢的错误。这是因为我的背景是白色的，默认情况下 vue-toast 使用白色作为文本，如果您不设置主题，则 toastr 上没有背景颜色。这样我才意识到这些词实际上是在屏幕底部弹出的。现在，一旦我将主题设置为 info，它就可以很好地工作。非常感谢@aristidesfl 的指导和支持。