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

尝试一下

<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

只需在if(confirm('are you sure?'))内使用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);
        })
},

并删除onClick

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

Answer 3

confirm()方法在全球范围内可用。您可以在应用程序中的任何位置调用它：

confirm('Your message')
    .then(result => {
        console.log(result);
});

您也可以配置对话框选项：

confirm({
  title: "Your title",
  message: "Your message",
  okButtonText: "Your OK button text",
  cancelButtonText: "Your Cancel text"
}).then(result => {
  console.log(result);
});

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

3 个答案: