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

Posted 2023-02-21

【中文标题】如何在vue中创建警报确认框

【英文标题】：how to create alert confirm box in vue

【发布时间】：2019-06-06 23:12:11

【问题描述】：

我想在删除文件之前显示一个对话框，如何使用 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);
                )
            ,

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

【参考方案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);
                )
   
,

【讨论】：

如果您使用$t('some_label') 进行翻译，您可以在函数中访问 t，如下所示：if (confirm(this.$t('delete_entry')))

【参考方案2】：

只需在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/

【参考方案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

【讨论】：

为什么要为一个小的确认对话框拉整个库？