如何在vue中创建警告确认框

Question

我想在删除文件之前显示一个对话框，我如何用 vue 做到这一点？

这是我的尝试

我的删除文件按钮

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

这是我的删除方法

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

对话框正在显示，但无论我选择什么，它都会继续删除文件。

Answer 1

只需在 DeleteUser.

中使用 if(confirm('are you sure?'))

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

并删除 onClick

演示 https://jsfiddle.net/jacobgoh101/ho86n3mu/4/

Answer 2

试试这个

<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 3

对于使用Quasar Framework的情况，可以使用这个插件。我在全球范围内使用 !

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

如何在vue中创建警告确认框

how to create alert confirm box in vue

javascript

alert

vue.js

vuejs2