how to create alert confirm box in vue

user_9661872 0
Viewed 60096

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.

vuejs2 vue.js alert javascript
4 Answers

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

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/

user_55992880

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

user_124617050

For the case of using the Quasar Framework, you can use this plugin. I use globally !

export default {
  methods: {
    confirm() {
      this.$q.dialog({
        title: 'Confirm',
        message: 'Would you like to turn on the wifi?',
        cancel: true,
        persistent: true
      }).onOk(() => {
        // console.log('>>>> OK')
      }).onOk(() => {
        // console.log('>>>> second OK catcher')
      }).onCancel(() => {
        // console.log('>>>> Cancel')
      }).onDismiss(() => {
        // console.log('I am triggered on both OK and Cancel')
      })
    }


  }
}
<q-btn label="Prompt" color="primary" @click="prompt" />

Quasar Dialog

user_110474770
Related