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?
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.
vue-class-component, simply adding console = console; in your class definition will work;
data function. You make the entire contents of console reactive, which is potentially lot of work for Vue, depending on what you have in console at any one time. Where as the above computed (or get console() { return console } in a vue-class-component) only exposes a reference to the object, without adding refs to it. This becomes a lot more clear in Vue 3, which does a much better job at exposing how reactivity works.
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)
}
}
app.config.globalProperties.console = console. Much easier for me.
You can use $el.ownerDocument.defaultView.console.log() inside your template
Pro: Doesn't require any component changes
Con: Ugly
With Vue ^3.3, you can now use console directly in the template:
<template>
<!-- just works, no more `console` doesn't exist -->
<button @click="console.log">Log</button>
</template>
If using Vue prior to 3.3, do:
const app = createApp(App)
app.config.globalProperties.console = console
If also using TypeScript:
// types.d.ts
export {}
declare module 'vue' {
interface ComponentCustomProperties {
console: Console
}
}
If using Vue 2, do:
Vue.prototype.console = console
Use console.* inside the template:
<h1>{{ console.log(message) }}</h1>
To not interfere with the rendering, use console.* with ?? (or || if using Vue 2, since ?? is not supported in the Vue 2 template):
<h1>{{ console.log(message) ?? message }}</h1>
Also if you want to access console from {{ }} you can use global mixin:
Vue.mixin({
computed: {
console: () => console
}
})
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'
You can use computed property or methods for this case. If you need to code it as javascript in the Vue template. you have to define console in the data.
Please check the code below.
data(){
return {
selected :"a",
log : console.log
}
}
<span>{{log(selected)}}</span>
This will make functionality of console.log available, while resolving the template.
return { console, ... };.I'd make a getter for console template variable:
get console() { return window.console; }
For Vue 3, SFC Composition API, you have to define a function and call console or alert inside that function
<script setup>
import Child from "./Child.vue";
function notify(message) {
alert(message);
}
</script>
<template>
<Child @some-event="notify('child clicked')" />
</template>
It has been fixed in Vue 3.3, see the GitHub issue. You can use console in the template.
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<h1>{{ count }}</h1>
<button @click="console.log(++count)"</button>
</template>
I found this template code that may be useful, https://gist.github.com/jensendarren/11afda8dee3171a192df3443f7a1508a
<!--Make sure to install @vue/cli-service-global first-->
<!--Serve this up using `vue serve` at the command line-->
<!--Details here: https://cli.vuejs.org/guide/prototyping.html -->
<template>
<div>
<h1>{{name}}</h1>
<b>Logging To Vue Component? <span>{{logging}}</span></b>
<br />
<button @click="testLog">Test Log</button>|<button @click="testWarn">Test Warn</button>|<button @click="toggleLogging">Toggle Logging</button>
<hr/>
<p v-for="(log, i) in logs" :key="i" :style="log.style" class="linebreaks" >{{log.message}}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Console Log Prototype',
logs: [],
o_log: null,
o_warn: null,
logging: true
}
},
methods: {
testLog() {
var var1 = 'Darren'
var var2 = 'Jensen'
console.log('in testLog()')
console.log('This should be\non a new line')
console.log(`First name: ${var1}, last name: ${var2}`);
console.log('string 1', 'string 2', var1, var2)
console.log(`%c[routeTo] ${var1}`, "color: #00b4e8;")
},
testWarn() {
console.warn('in testWarn()')
},
toggleLogging() {
if(this.logging) {
// Disable logging
console.log = this.o_log
console.warn = this.o_warn
this.clearLogs();
} else {
// Activate logging
this.overrideLogging();
}
this.logging = !this.logging
},
clearLogs() {
this.logs = []
},
overrideLogging() {
let self = this;
this.o_log = console.log
this.o_warn = console.warn
function customLog(...msg) {
var entry = parseMsgArray(msg)
self.logs.push(entry)
self.o_log.apply(console, arguments)
}
function customWarn(msg) {
var entry = {color: 'yellow', message: msg}
self.logs.push(entry)
self.o_warn.apply(console, arguments)
}
function parseMsgArray(msgArray) {
var entry;
if(msgArray[0].includes('%c')) {
// 2nd param will contain styles to apply
var applyStyle = msgArray[1]
var msg = msgArray[0].replace('%c', '')
entry = {style: applyStyle, message: msg }
} else {
entry = {style: {color: 'black', background: 'pink'}, message: msgArray.join(' ')}
}
return entry
}
console.log = customLog;
console.warn = customWarn;
}
},
created() {
this.overrideLogging();
}
}
</script>
<style scoped>
.linebreaks {
white-space:pre;
}
</style>
