参考错误：“Swal 未定义”

Question

我正在使用 codeigniter 和 VueJs 以及甜蜜警报 javascript 库进行小型项目。但是ReferenceError: "Swal is not defined"一旦我swall.fire({})在我的 VueJs 方法中调用，我的控制台就会出错。 这是我的代码：

deleteCustomers(customer_id){
        Swal.fire({
           title: 'Are you sure?',
           text: "You won't be able to revert this!",
           icon: 'warning',
           showCancelButton: true,
           confirmButtonColor: '#3085d6',
           cancelButtonColor: '#d33',
           confirmButtonText: 'Yes, delete it!'
           }).then((result) => {
              axios.post('/Thirdparty/deleteCustomers', {id : customer_id}).then(function(response){
                 console.log(response.data);
                 //alert(response.data.error);
                 Swal.fire(
                 'Deleted!',
                 'Your file has been deleted.',
                 'success'
                 );
              });
           });
     }

当然，我已经使用以下方法导入了 swall： import Swal from 'sweetalert2';

注意：swall.fire 不仅在 Vuejs 方法中起作用

Answer 1

这是在 vue js 上快速实现 Sweet Alert 的方法

npm install sweetalert2

在您的 app.js 上注册甜蜜警报，使其在您的所有组件中都可以访问

import swal from 'sweetalert2';
window.Swal = swal;

然后在示例的任何组件中（Example.vue）

<template>
  ...
</template>
<script>
   export default{
     methods:{
       test(){
         Swal.fire('Test!', 'Hello test message','success');
      } 
    }
   }

可以在此处找到更多甜蜜警报方法

Answer 2

Swal（大写S）并Swal.fire()在sweetalert2版本中引入> 7.20.0。

在旧版本 ( < 7.20.0) 中，您应该改用swal({options})。

如果您使用 npm ，还要确保使用大写 S 导入它：

import Swal from 'sweetalert2'