How can I use `console.log` or `console.error` in a vue template?

Question

I have a vue component with

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

gives

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

window.console doesn't work either

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

Answer 1

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

Answer 2

Simplest way of providing global objects to the template is to place them in computed, like this:

console: () => console. Same goes for window,

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

See it here.