我有一个vue组件
<form @keydown="console.error($event.target.name);">
给予
app.js:47961 [Vue 警告]：未定义属性或方法“控制台” 在实例上，但在渲染期间被引用。
window.console 也不起作用
在模板中使用控制台和窗口进行调试的正确方法是什么？
【问题讨论】：
标签： vue.js vuejs2 vue-component
如果你想内联运行它而不是使用方法，只需在表单中添加this：
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>
但最好使用方法而不是内联运行函数，这样您就可以更好地控制它：
<!-- 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)
}
}
【讨论】：
app.config.globalProperties.console = console。对我来说容易多了。
我会为控制台模板变量创建一个吸气剂：
get console() { return window.console; }
【讨论】：
您可以使用 this.console 代替控制台或在方法中包装对控制台的调用，我正在使用带有规则 'no-console': 'off' 的 eslint 配置
【讨论】：
向模板提供全局对象的最简单方法是将它们放在computed 中，如下所示：
console: () => console。 window 也是如此，
computed: {
console: () => console,
window: () => window,
}
看here。
【讨论】：
vue-class-component，只需在类定义中添加console = console; 即可；
data 函数中声明它。您使 console 的全部内容成为响应式，这对 Vue 来说可能是很多工作，这取决于您在任何时候在 console 中拥有的内容。上面计算的（或vue-class-component 中的get console() { return console }）仅公开对对象的引用，而不向其添加引用。这在 Vue 3 中变得更加清晰，它在揭示反应性的工作原理方面做得更好。
console 不是只读的。也非常容易测试。无论如何，这完全不是重点。关键是 Vue 将尝试使您传递给它的任何内容都对一种方法进行反应，而不会尝试使用另一种方法。这就是我要说的。有问题吗？在大多数情况下，没有。它可能有问题吗？是的。在某些情况下，它可能会成为问题。
console.foo = console.log; console.log = () => console.foo('my knowledge is limited'); console.log('console is a read-only object');
另外，如果你想从 {{ }} 访问控制台，你可以使用全局 mixin：
Vue.mixin({
computed: {
console: () => console
}
})
【讨论】：
如果使用 Vue 3，请执行以下操作：
const app = createApp(App)
app.config.globalProperties.$log = console.log
如果使用 Vue 2，请执行以下操作：
Vue.prototype.$log = console.log
在模板内使用$log：
<h1>{{ $log(message) }}</h1>
为了不干扰渲染，请使用 $log 和 ??（如果使用 Vue 2，则使用 ||，因为模板不支持 ??）：
<h1>{{ $log(message) ?? message }}</h1>
【讨论】：
您可以在模板中使用$el.ownerDocument.defaultView.console.log()
专业版：不需要任何组件更改
缺点：丑
【讨论】：
在这种情况下，您可以使用计算属性或方法。 如果您需要在 Vue 模板中将其编码为 javascript。您必须在数据中定义控制台。
请检查下面的代码。
data(){
return {
selected :"a",
log : console.log
}
}
<span>{{log(selected)}}</span>
这将使 console.log 的功能可用，同时解析模板。
【讨论】：