Question

我正在创建laravel SPA，并且正在使用vue.js作为框架。我在项目中添加了sweetalert程序包，但是每当我使用<div class="image" data-bg="adorable_cat"></div>函数时，都会收到错误消息。我尝试使用其他功能，例如toast，但除swal.fire之外，其他功能均有效。有人可以帮我弄这个吗？这是我的一些代码。

app.js

toast.fire

Users.vue


require('./bootstrap');

import Vue from 'vue'
import { Form, HasError, AlertError } from 'vform'
import moment from 'moment'
import VueRouter from 'vue-router'
import VueProgressBar from 'vue-progressbar'
import swal from 'sweetalert2'

window.Form = Form;
window.swal = swal;
window.toast = toast;
window.Vue = require('vue');

Vue.use(VueRouter)
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)


const toast = swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000
  });


Vue.use(VueProgressBar, {
    color: 'rgb(143, 255, 199)',
    failedColor: 'red',
    height: '2px'
  })

const routes = [
    { path: '/dashboard', component: require('./components/Dashboard.vue').default },
    { path: '/profile', component: require('./components/Profile.vue').default},
    { path: '/users', component: require('./components/Users.vue').default}
  ]

const router = new VueRouter({
    mode: 'history',
    routes // short for `routes: routes`
  })

  Vue.filter('upText', function(text){
    return text.charAt(0).toUpperCase() + text.slice(1);
  });

  Vue.filter('myDate', function(created){
    return moment(created).format('MMMM Do YYYY');
  });


Vue.component('dashboard', require('./components/Dashboard.vue').default);
Vue.component('profile', require('./components/Profile.vue').default);
Vue.component('users', require('./components/Users.vue').default);


const app = new Vue({
    el: '#app',
    router
});

Answer 1

此行开始时，toast将为undefined：

window.toast = toast;

请注意，行const toast = swal.mixin({稍后出现。您将需要以其他方式编写这些行。

我个人首先不会直接在window上公开这些内容。根据需要导入它们，或将它们添加到Vue原型中：

Vue.prototype.$toast = toast

然后通过在组件中调用this.$toast.fire来使用它。

Answer 2

在发生以下toast.fire事件时，您必须致电axios.post，

createUser(){
  this.$Progress.start();
  axios.post('api/user', this.form).then(response => {
     toast.fire({
     type: 'success',
     title: 'User Created',
     position: 'top-end',
    })
    this.$Progress.finish();
  }).catch(error => {
    this.$Progress.finish();
  });

您可以处理成功和失败，并分别显示敬酒消息.then和.catch事件。希望这会有所帮助。

[Vue警告]：v-on处理程序中的错误：“ TypeError：无法读取未定义的属性'fire'”

2 个答案: