如何解决在Vue.js中使用sweetalert时出现的问题
如何正确导入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
解决方法
尝试不使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。