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事件监听器中正常运行。我可以在控制台日志中看到销毁消息。

您能告诉我，为什么它不能作为单击事件方法的一部分。应用实例未销毁。

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');
                    } 
                    });