Vue 挂载事件不执行

Question

我正在尝试构建一个页面，在该页面加载后应立即设置一个变量。我放置了我的方法并尝试反复调试它，但没有任何结果，然后我尝试将一个字符串打印到控制台 mounted 也没有任何反应……我不确定我是否遗漏了什么。

我使用 Vue CLI 构建我的项目，目前，在下面的代码中，我将从模板中插入对 HelloWorld.vue 的更改

我也添加了一个按钮作为检查，

 <button onclick="foo">foo</button>

页面的脚本部分如下所示：

 <script>
    export default {
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            mounted: function() {
                console.log("Mounted!")
            },
            foo: function() {
                console.log("button")
            }
        }
    }
</script>

预期的行为是“安装！”保存和刷新时在控制台上，每当我单击按钮时都会显示“按钮”。显示页面时我什么也得不到，每当我单击按钮时只出现“按钮”。 mounted 是在这里使用的错误函数还是我遗漏了其他东西？

原文由 j0zeft 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

啊。这是人们常犯的一个简单而常见的错误。这是您实际应该如何编写 mounted 。

 <script>
    export default {
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            foo: function() {
                console.log("button")
            }
        },
        mounted: function() {
            console.log("Mounted!")
        },
    }
</script>

mounted 应该与方法、数据或计算处于同一级别。不是内部方法。

就是这样，它现在应该可以工作了。

我希望它有所帮助。

原文由 Ankit Kumar Ojha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不是这里的问题，但是当我忘记包含结束 </script> 标签时，我遇到了同样的事情。以防万一它可以让其他人有点头疼……

原文由 Leo 发布，翻译遵循 CC BY-SA 4.0 许可协议