将 sweetalert 与 Vue.js 一起使用时的问题答案

【问题标题】：Issue when using sweetalert with Vue.js将 sweetalert 与 Vue.js 一起使用时的问题
【发布时间】：2020-08-18 17:01:44
【问题描述】：

如何正确导入 sweetalert2 以便可以使用 Swal？只想在这个文件中使用它。为什么<script src = "https://cdn.jsdelivr.net/npm/sweetalert2@9"> </script> 不像官方网站那样工作？

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tables-2@2.0.23/dist/vue-tables.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script>

    Vue.config.devtools = true;
    Vue.use(VueTables);
    Vue.use(SweetAlert);
    const Event = VueTables.Event;
    const Swal = SweetAlert;
    Vue.component("modal", {
        template: "#modal-template"
    });

    new Vue({
        el: "#crm-app",
        data() {
            return {
                dataTable: [],
                states: [],
                selectedState: '',
                managers: [],
                isModalVisible: false,
            }
        },
        methods: {
            deleteItem: function(){
                Swal.fire({
                  title: 'Error!',
                  text: 'Do you want to continue',
                  icon: 'error',
                  confirmButtonText: 'Cool'
                });
            },
         ......

我在控制台中有错误：sweetalert2@9:1 Uncaught TypeError: Cannot call a class as a function

【问题讨论】：

这会以什么方式失败？你有一个完整的例子来说明这个问题吗？
@David 我更新了问题
请提供minimal reproducible example。

标签： javascript vue.js vuejs2 vue-component sweetalert2

【解决方案1】：

尽量不要使用Vue.use(SweetAlert);

//Vue.use(SweetAlert);

const Swal = SweetAlert;

new Vue({
  el: "#crm-app",
  data() {
    return {
      dataTable: [],
      states: [],
      selectedState: 'state',
      managers: [],
      isModalVisible: false,
    }
  },
 methods: {
    deleteItem: function() {
      Swal.fire({
        title: 'Error!',
        text: 'Do you want to continue',
        icon: 'error',
        confirmButtonText: 'Cool'
      });
    }
  },
  mounted() {


  }
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />



<div id="crm-app"> <button class="btn btn-primary" @click="deleteItem">delete</button> </div>

【讨论】：