Question

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

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'
                 );
              });
           });
     }

当然，我已经使用：import Swal from 'sweetalert2';

导入了swall

NB ：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');
      } 
    }
   }

可以找到更多的“甜蜜警报”方法here

Answer 2

在main.js上注册甜蜜警报，使其可在所有组件中访问

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

Answer 3

Swal（带有大写字母S）和Swal.fire()是在sweetalert2版本> 7.20.0中引入的。

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

如果您使用的是npm，请确保以大写字母S导入：

import Swal from 'sweetalert2'

ReferenceError：“未定义小节”

3 个答案: