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

37
votes

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?

7
vue.jsvuejs2vue-component

7 Answers

31
votes

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

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.

7
votes

Also if you want to access console from {{ }} you can use global mixin:

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

I'd make a getter for console template variable:

    get console() { return window.console; }
0
votes

You can use this.console instead console or wrap call to console in a method, i am using eslint config with rule 'no-console': 'off'

0
votes

If using Vue 3, do:

const app = createApp(App)

app.config.globalProperties.$log = console.log

If using Vue 2, do:

Vue.prototype.$log = console.log

Use $log inside template:

<h1>{{ $log(message) }}</h1>

To not interfere with the rendering, use $log with ?? (or || if using Vue 2, since ?? is not supported in the template):

<h1>{{ $log(message) ?? message }}</h1>
0
votes

You can use $el.ownerDocument.defaultView.console.log() inside your template

Pro: Doesn't require any component changes
Con: Ugly