如何在 vue 模板中使用 \`console.log\` 或 \`console.error\`？

Question

我有一个 Vue 组件

 <form @keydown="console.error($event.target.name);">

给

app.js:47961 [Vue 警告]：属性或方法“控制台”未在实例上定义，但在渲染期间被引用。

window.console 也不起作用

在模板中使用控制台和窗口进行调试的正确方法是什么？

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

Answer 1

如果您想内联运行它而不是使用方法，只需将 this 添加到表单中：

代码笔： https ://codepen.io/x84733/pen/PaxKLQ ?editors=1011

 <form action="/" @keydown="this.console.log($event.target.name)">
  First: <input type="text" name="fname"><br>
  Second: <input type="text" name="fname2"><br>
</form>

但最好使用方法而不是内联运行函数，这样您就可以更好地控制它：

 <!-- Don't forget to remove the parenthesis -->
<form action="/" @keydown="debug">
  First: <input type="text" name="fname"><br>
  Second: <input type="text" name="fname2"><br>
</form>

...

methods: {
  debug (event) {
    console.log(event.target.name)
  }
}

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