Question

我正在使用vue.js在我的网页中创建一种通知系统一切正常但我想在转换完成后删除元素。我只能使用setTimeout来处理这个问题，但这不是理想的方法

工作jsfiddle： http://jsfiddle.net/yMv7y/1073/

这是我的代码：

Vue的：

main()

Html：

Vue.transition('notification', {
    enter: function(el) {
        app.notifications.pop();
    },
    leave: function(el) {
        setTimeout(function(){
            el.remove();
        },5000);
    },
});

Vue.component('notification', {
    template: '<div class="notification" v-class="red: !success, green: success" v-transition="notification"><p>{{message}}</p></div>',
    data: function() {
        return {
            success: true,
            message: '',
        };
    },
});

var app = new Vue({
    el: 'body',
    data: {
        notifications : [
        ]
    },
    ready: function() {
        self = this;
        var data = {
            'message': 'Thank you',
            'success': true
        };
        self.notifications.push(data);
    },
});

CSS ＃通知，包装 { 位置：固定; z-index：99; 顶部：0; 左：80％;

<div id="notifications-wrapper">
    <notification id="notification"
            v-repeat="notifications"
            >
    </notification>
</div>

Answer 1

问题：您尝试在转换过程中删除el（leave function），因此在没有setTimeout的情况下出现错误。

解决方案：您必须使用afterLeave function。将leave function更改为afterLeave function。

afterLeave: function(el) {

        el.remove();
}

Jsfiddle

vue.js在转换后删除元素

1 个答案: