如何在 Vue 3 中使用 Laravel 烤面包机包

Question

我在一个用 Laravel 8 和 Vue 3 制作的项目中工作。我使用这个 Laravel toastr 包：

composer require yoeunes/toastr

这个烤面包机在 Laravel 控制器中工作得很好，但问题是我不知道如何在 vue axios 函数中调用这个烤面包机。

如何让这个 toastr 全球化？这样我就可以在 Laravel 和 Vue.js 两边使用它了？

如果你能帮我解决这个问题，我会很高兴。

Vue 函数：

methods: {
    submit() {
        axios.post('/login', this.fields)
            .then(response => {
                if (response.status === 200) {
                // Hier comes 'welcome message' 
                toastr()->success('you are logged in');
                }
            }).catch(error => {
            if (error.response.status === 401) {
                this.errors = error.response.data.errors;
            }
        });
    }
}

Answer 1

我认为您应该声明一个全局变量并将 'this' 分配给它，因为每当您在 axios 中调用 'this' 时，它都会引用响应。然后，在 axios 函数中调用声明的全局变量：

methods: {
    submit() {
        var gloabl_this = this;
        axios.post('/login', this.fields)
            .then(response => {
                if (response.status === 200) {
                // Hier comes 'welcome message' 
                global_this.toastr()->success('you are logged in');
                }
            }).catch(error => {
            if (error.response.status === 401) {
                this.errors = error.response.data.errors;
            }
        });
    }
}

希望这对你有用，如果仍然有任何错误请告诉我。

Answer 2

问题我解决了！ :-)

在 laravel 个控制器中，这个包对我来说工作正常。

composer require yoeunes/toastr

为了使 toastr Global 也能在 Vue.js 中工作，我已经通过 npm 安装了 toastr 包，如下所示！

npm install toastr --save
npm run dev

那我已经在bootstrap.js

注册了

window.toastre = require('toastr');

然后我就可以在我的 vue axios 函数中调用他了！

methods: {
   submit() {
      axios.post('/login', this.fields)
         .then(response => {
            if (response.status === 200) {
               this.fields = {};
               this.errors = {};
               this.success = true;
               toastr.success('you are logged in');
               
           }
        }).catch(error => {
        if (error.response.status === 401) {
           this.errors = error.response.data.errors;
        }
     });
  }
}

如何在 Vue 3 中使用 Laravel 烤面包机包

How to use Laravel toaster package in Vue 3

php

toastr

vuejs3

laravel-8