Question

我正在尝试构建一个页面，该页面在加载后应立即设置一个变量。我放置了方法并尝试反复调试，但完全没有结果，然后我尝试只在mounted处将字符串打印到控制台，也没有任何反应...我不确定是否丢失了某些内容

我搭建了项目usnig 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是在此处使用的错误函数，还是我缺少其他功能？

Answer 1

啊。这是人们做的一个简单而常见的错误。这是您实际应该如何写挂载的方式。

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

安装的方法，数据或计算方法应处于同一级别。不在方法内部。

仅此而已，现在应该可以使用。

希望对您有帮助。

Answer 2

这里不是问题，但是当我忘记包含结束</script>标签时，我遇到了同样的事情。以防万一它节省了别人的头部抓伤...

Vue挂载事件不起作用

2 个答案: