ReferenceError：“未定义 Swal”

Question

我正在使用 codeigniter 和 VueJs 以及 sweet alert javascript 库进行小型项目。但是我的控制台 ReferenceError: "Swal is not defined" 一旦我在我的 VueJs 方法中调用 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'
                 );
              });
           });
     }

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

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

原文由 Amine Bouhaddi 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

更多甜蜜警报方法可以在 这里 找到

原文由 Felix Runye 发布，翻译遵循 CC BY-SA 4.0 许可协议