时间戳

首页 > 解决方案 > Vue挂载事件未执行

javascript - Vue挂载事件未执行

问题描述

我正在尝试构建一个页面，一旦加载页面，就应该在其中设置变量。我放置了我的方法并尝试反复调试它，但没有任何结果，然后我尝试在控制台打印一个字符串，但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在这里使用错误的功能还是我错过了其他东西？

标签： javascriptvue.jsvuejs2

解决方案

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

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

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

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

我希望它有所帮助。

推荐阅读