vue.js app.$destroy() 不删除应用程序实例

Question

我正在学习vue js。我有一个名为 growler 的应用程序。我正在尝试调用按钮的 $destroy 方法 on-click。

<button id="destroyButton" class="btn btn-danger" v-on:click="onDestroyClick">Destroy</button>

如果我有方法作为 Javascript 事件的一部分，它就可以工作。

 <script type="text/javascript">
           document.getElementById('destroyButton').addEventListener('click', function() {
                growler.$destroy();
            }); 
</script>

但是，如果我将此方法作为 vue on-click 事件的一部分调用，则它不起作用。

methods: {
                  onDestroyClick: function() {
                        this.$destroy();
                    } 
                }

我正在为实例的不同事件设置生命周期挂钩。我正在尝试将它们记录在控制台中。

beforeDestroy: function() {
                    console.log('beforeDestroy');
                },

                destroyed: function() {
                    console.log('afterDestroy');
                }

这在 Javascript 事件侦听器中工作正常。我能够在控制台日志中看到 Destroy 消息。

你能告诉我为什么它不能作为点击事件方法的一部分工作吗？应用程序实例未被销毁。

Answer 1

在这里添加答案，因为它刚刚在评论中提到过。

这是牙套的问题。代码贴在下面：

对应的jsfiddle是here

    var growler = new Vue({
                    el: '#growler',
                    data :
                    {
                     message : "test"
                    },

                    methods: {                   
                        onDestroyClick: function() {
                            this.$destroy();
                        } 
                    },
                   beforeDestroy: function() {
                       console.log('beforeDestroy');;
                    },

                    afterDestroy: function() {
                        console.log('afterDestroy');
                    } 
                    });

vue.js app.$destroy() 不删除应用程序实例

vue.js app.$destroy() does not remove app instance

javascript

event-handling

destroy

dom-events

vue.js