Question

我有一个vue组件

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

给予

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

window.console也不起作用

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

Answer 1

如果要内联运行而不是使用方法，只需将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)
  }
}

Answer 2

向模板提供全局对象的最简单方法是将它们放置在computed中，如下所示：

console: () => console。 window也是如此，

computed: {
  console: () => console,
  window: () => window,
}

here看到它。

Answer 3

此外，如果您想从{{}}访问控制台，则可以使用全局混合：

Vue.mixin({
    computed: {
        console: () => console
    }
})

Answer 4

我将为控制台模板变量做一个吸气剂：

    get console() { return window.console; }

Answer 5

您可以使用 this.console 代替控制台，也可以将调用包装到一个方法中，例如，我将eslint config与规则'no-console': 'off'一起使用

Answer 6

如果使用 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>

Answer 7

您可以在模板中使用 $el.ownerDocument.defaultView.console.log()

Pro：不需要任何组件更改
缺点：丑

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

7 个答案: