Question

我正在学习vue js。我有一个名为 growler 的应用。我试图调用$ destroy方法点击按钮。

<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

在评论中刚才提到的在这里添加答案。

这是Bracces的问题。该代码粘贴在下面：

对应的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（）不起作用

1 个答案: