如何在 vue 模板中使用 `console.log` 或 `console.error`? [英] How can I use `console.log` or `console.error` in a vue template?

问题描述

我有一个 vue 组件

I have a vue component with

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

给予

app.js:47961 [Vue 警告]:属性或方法控制台"没有定义在实例上但在渲染期间被引用.

app.js:47961 [Vue warn]: Property or method "console" is not defined on the instance but referenced during render.

window.console 也不起作用

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

What is the proper way to use console and window in a template to debug?

推荐答案

如果你想内联运行它而不是使用方法，只需在表单中添加this:

If you want to run it inline instead of using a method, just add this to the form:

Codepen: 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>

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

But it'd be better to use a method instead of running functions inline, so you have more control over it:

<!-- 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)
  }
} 

这篇关于如何在 vue 模板中使用 `console.log` 或 `console.error`?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！