jeudi 21 novembre 2019

How to pass an event with catching error message also closing the vuetify dialog after the executing the method in vuejs?

i have a dialog form.where i am posting data to database.and also passing an event.there is few thing i want to done when i am clicking create buttton.

1.i want to pass an event to my parent component.

2.i want to catch the error message and show.

3.if there is error then event will not be passing.

4.i am showing a toaster on closing the dialog.

5.if data is succesfully posted i want to close the dialog.

6.when i am openning the dialog again i want the text filed to be empty.

In below code i have done it but the problem it's working the way wanted.

button for executing the method:

   <v-btn type="submit" style="background-color:#3b5998;color:white;" text @click="CreateClassHead">Create</v-btn>

vuejs data and method:

data: () => ({
        dialog: false,
        item:[
            {'id':1,'name':'Active'},
            {'id':0,'name':'In-Active'}
        ],
        form:{
            name:null,
            status:null,
        },
        errors:{},
        x:0,
    }),
    methods:{
        CreateClassHead()
        {
            axios.post('/lms/api/class-head',this.form)
                .then(res => (
                    this.dialog = false,
                        this.$toasted.show('Class Created', {type: 'success'}),
                        EventBus.$emit('class-head-created', this.form)

                ))
                .catch(error =>this.errors = error.response.data.errors)
            this.x=0

        },

    },


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire