简体   繁体   中英

[Vue warn]: Error in v-on handler: “TypeError: Cannot read property 'fire' of undefined”

I'm creating a laravel SPA and I'm using vue.js as a framework. I'm adding a sweetalert package in my project but whenever i use the toast function it gets me an error. I tried using other functions like swal.fire and it works except for toast.fire . Can someone help me with this? Here are some of my codes.

app.js


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

Users.vue

<template>
//html codes
</template>
<script>
    export default {
        data(){
            return{
            users: {},
                form: new Form({
                    name: '',
                    email: '',
                    password: '',
                    type: '',
                    bio: '',
                    photo: '',
                })
            }
        },

        methods: {
            loadUsers(){
                axios.get("api/user").then(( {data }) => (this.users = data.data));
            },
            createUser(){
                this.$Progress.start();
                this.form.post('api/user');
                toast.fire({
                type: 'success',
                title: 'User Created',
                position: 'top-end',
                })
                this.$Progress.finish();
            }
        },
        created() {
            console.log('Component mounted.');
            this.loadUsers();
        }
    }
</script>

At the point this line runs, toast will be undefined :

window.toast = toast;

Note that the line const toast = swal.mixin({ comes later. You would need to write these lines the other way around.

Personally I wouldn't expose these directly on window in the first place. Either import them as required or add them to the Vue prototype:

Vue.prototype.$toast = toast

You'd then use it by calling this.$toast.fire in your components.

You have to call toast.fire in then event of axios.post as below,

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

You can handle success and failure and show toast messages .then and .catch event respectively. Hope this helps.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM