【问题标题】:How to alert and deleted a task using Sweet alert and vue.js?如何使用 Sweet alert 和 vue.js 提醒和删除任务?
【发布时间】:2016-06-26 07:12:43
【问题描述】:

我收到 Sweet Alert 的确认提示消息,但当我点击确认消息时,我无法删除任务。

methods: {
    confirmDelete: function(index) { //index is passed by the button
        //var self = this;
        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            closeOnConfirm: true
        }, function(isConfirm) {
            if (isConfirm) {
                this.contacts.splice(index, 1);
                swal(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'
                );

                return true;
            } else {
                return false;
            }
        }.bind(this));
    }
}

【问题讨论】:

    标签: javascript jquery vue.js


    【解决方案1】:

    问题可能是this 声明 试试这样的:

        var self = this;
        function(isConfirm) {
                  if(isConfirm){
                      self.contacts.splice(index, 1);
                      swal(
                        'Deleted!',
                        'Your file has been deleted.',
                        'success'
                      );
    
                      return true;
                  }
                  else{
                    return false;
                  }
    

    工作版本: https://jsfiddle.net/jyfdh32g/

    我改变了什么: vue 版本到最后稳定 - 1.0.25 确认按钮动作样式来自:https://limonte.github.io/sweetalert2/ 示例。

    为什么$index 不起作用?

    参数顺序更新:(value, index) in arr, (value, key, index) in obj $index 和 $key 已弃用

    https://github.com/vuejs/vue/issues/2873

    【讨论】:

    • 我仍然无法删除。请找到 jsfiddle jsfiddle.net/mithicher/5ur27pc7/2 以获取完整代码。谢谢...
    • var $index 由于某种原因在您的 v-for 循环中未定义。我看到你使用的是 beta 版本的 vue 2.0?也许这是所有麻烦的主要原因。
    猜你喜欢
    • 1970-01-01
    • 2016-07-23
    • 1970-01-01
    • 1970-01-01
    • 2018-06-18
    • 2017-12-06
    • 1970-01-01
    • 2020-03-10
    • 1970-01-01
    相关资源
    最近更新 更多