how to create alert confirm box in vue

Question

i want to show a dialog box before deleting a files, how i can do it with vue?

here what i try

my button to delete a file

<a href="javascript:;" v-on:click="DeleteUser(artist.id, index)" onClick="return confirm('are you sure?');">Delete</a>

and here my delete method

DeleteUser(id, index) {
                axios.delete('/api/artist/'+id)
                .then(resp => {
                    this.artists.data.splice(index, 1);
                })
                .catch(error => {
                    console.log(error);
                })
            },

the dialog is showing but whatever i choose it keep delete the file.

Answer 1

Try this

<a href="javascript:;" v-on:click="DeleteUser(artist.id, index)">Delete</a>

DeleteUser(id, index) {

   if(confirm("Do you really want to delete?")){

                axios.delete('/api/artist/'+id)
                .then(resp => {
                    this.artists.data.splice(index, 1);
                })
                .catch(error => {
                    console.log(error);
                })
   }
},

Answer 2

Simply use if(confirm('are you sure?')) inside DeleteUser.

DeleteUser(id, index) {
    if(confirm('are you sure?'))
        axios.delete('/api/artist/'+id)
          .then(resp => {
          this.artists.data.splice(index, 1);
        })
          .catch(error => {
          console.log(error);
        })
},

and remove the onClick

Demo https://jsfiddle.net/jacobgoh101/ho86n3mu/4/

Answer 3

You can install an alert library (Simple Alert) from here for more beautiful view

And then, you can use options to show alert box with question or anything else. This library has a few option. You can see them if you check above link.

this.$confirm("Are you sure ?", "Class is deleting...", "question").then(()=>{

           axios.delete("/classes/" + studentClass.id).then(response =>{
                this.$alert(response.data.message, 'Succes', 'success');
           }).catch(error => {
               this.$alert(error.response.data.message, 'Hata', 'error');
           });

       });

Description of alert box with parameters :

this.$confirm('Message is here', "Title is here", "type is here like success, question, warning");