Error encountered while integrating sweetalert into Vue.js framework

Can anyone help me with importing sweetalert2 correctly to use Swal in this file only? I tried using 

<script src = "https://cdn.jsdelivr.net/npm/sweetalert2@9">
but it's not working as expected. What could be the issue?

    <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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8deddcd85dcc9cac4cddb859ae89a8698869a9b">[email protected]</a>/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'
                });
            },
         ......

Encountering an error in the console: 

sweetalert2@9:1 Uncaught TypeError: Cannot call a class as a function

javascriptvue.jsvuejs2vue-componentsweetalert2

Answer №1

Avoid using the Vue.use(SweetAlert); syntax.

//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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An internal server error has occurred within the asp.net framework, resulting in

Seeking Solution: Currently, I am in the process of developing an application where I have implemented an HTML select list to choose a category. Using AJAX web method, I am trying to retrieve items and their respective images based on the selected category ...

javascriptc#jqueryasp.netajax

Incomplete DOM elements in jQuery are like puzzles that need to be solved

My issue revolves around jQuery and manipulating DOM elements. I need a specific template setup, as shown below: var threadreply = " <li class='replyItem'>" + " <div class='clearfix'>" + ...

javascriptjqueryjquery-templates

Creating a replica of a Parse Server object

I've been struggling to clone Parse objects without affecting the original ones. Despite trying various methods like Parse.Object.clone() and converting to JSON, I haven't found a working solution. I came across some recommendations online but no ...

javascriptparse-platformparse-server

Creating a React Native project without the use of TypeScript

Recently I dived into the world of React Native and decided to start a project using React Native CLI. However, I was surprised to find out that it uses TypeScript by default. Is there a way for me to create a project using React Native CLI without TypeS ...

javascriptreactjstypescriptreact-native

Steps for organizing values based on the selected value from the dropdown menu in a select option

I have two drop down menus, defined as follows: <select name="" id="district" onchange="selectbyDistrict()"> <option value="one">1</option> <option value="two">2</option> <option value="three">3</option&g ...

javascriptphphtmlajax

Converting Promises to Observables

Struggling with the syntax as I delve into learning Angular, I need to transform a promise into an Observable. Let me share what I've encountered: In the function getCountries (subscribed by another utility), there is a call required to fetch a list ...

javascriptangulartypescriptobservableangular-promise

Is there a way to send URL variables to express.js similar to how it's done in PHP?

Currently in the process of converting my PHP website to Express.js. There are numerous scripts on my frontend that generate links in the format page.php?id=10&something=anything. Is there a way in Express.js to capture variables from URLs structured ...

phpjavascriptnode.jsurlexpress

.forEach returns an undefined value for each length

Having trouble with my if statement. It seems like the else block is working fine, but the if section is not functioning as expected. The variable count1 comes out as undefined. Interestingly, the conditions inside the if statement are working correctly ...

javascriptjqueryeach

Display or conceal HTML content based on the input's property type

Looking to toggle the visibility of an icon on my input based on the prop type. If the type is set to password, the icon will be displayed for toggling between visible and hidden password; if the type is not password, the icon should be hidden by setting ...

javascriptvue.js

Incorporating user input into a form using NodeJS and Angular

I am currently facing an issue while trying to add a new entry using NodeJS with an Angular form. Every time I click on create, the data is not being inputted into the database. To address this, I included the angular.toJson function to convert the input i ...

javascriptangularjsnode.jsformsmongodb

Encountering challenges with managing global variables in my Node.js application

I am facing a problem with global variables in my NodeJs application. The project involves webservices created using the express module. When a client accesses the service, a json object is sent in the request body. I extract all properties from the reques ...

javascriptjsonnode.jsexpress

Accessing data from localhost using Vue.js and Axios is restricted due to CORS policy and the error "Access to XMLHttpRequest" may be

Having a minor issue... Trying to retrieve a basic json file from my server for testing purposes (not an actual API). Utilizing VueJS and axios. Here is my code : getServicesAPI() { axios.get("http://51.91..../dist/API/Services.json").the ...

javascriptvue.jsgetaxioslocalhost

The issue of incorrect encoding in JavaScript Blob while retrieving a file from the server

Implementing a FileStreamResult from C# in a SPA website (using .NET Core 2, SPA React template), I make a request to fetch a file from my endpoint. This triggers the following response in C#: var file = await _docService.GetFileAsync(token.UserName, inst ...

javascriptpdfblobfilestreamresult

Tips for managing the submission process for dynamically generated formsORStrategies for

<tr> <form role="form" class="manualImportSubmit" action="http://localhost:5000/XXX" method="post"> <td><input name="yyy" value="FormAValue" type="hidden">TestA</td> <td><input name="before_year" class="fo ...

javascriptjqueryhtmlforms

Tips for displaying a slideshow within a div using JavaScript

When the HTML loads for the first time, the div slideshow remains hidden until a button is clicked. Any suggestions on how to display the first div without requiring a button click? var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { s ...

javascriptvue.jsslideshow

How can HTML text be displayed based on certain JavaScript conditions?

By modifying the style of the text, I was able to implement basic functionality for validating correct answers. However, my main query is whether it is feasible to display a specific phrase upon achieving a perfect score. Upon analyzing the provided sample ...

javascripthtml

The functionality of the Javascript window.print() method is limited to a single use

I've been working on an Angular project and I have the following code snippet implemented in one of the components. Everything works fine when I try to print for the first time using the onClickPrint() method, but it doesn't seem to trigger when ...

javascriptangular

Using React Axios to Send Only the State Value of a Prop to the Backend

After successfully passing my parent state to my child component as a prop named title, I encountered an issue while trying to make a put request using axios with the value of that prop. The problem arose when attempting to use this prop's value in th ...

javascriptreactjsmongodbaxiosreact-props

Tips for inserting an object into an array while concurrently saving it to a file in Node.js

Is there a way to add objects to an array while writing to a file in Node Js? Presently, my functioning code looks like this: fs.appendFile("sample.json", JSON.stringify(data, undefined, 2) + ","); with 'data' being an object similar to this: ...

javascriptarraysnode.jsfs

What is the process for converting an <input type="file> into a base64 string?

Currently, I'm attempting to send an image to my express backend by including the image directly in the post request body. var imgValue = document.getElementById("image").value; Within my post request: body : JSON.stringify({ image:imgValue ...

javascripthtmlnode.jsexpressfile