Vue - The Road to Enterprise/

...

/

Logging Values in SFC Template

Logging Values in SFC Template

Learn how to debug values in the Vue template by using a new component.

We'll cover the following...

From time to time, we might want to check what values are in a template. However, there’s no access to the console.log method directly in the Vue template, and if we try to use it, we’ll get an error. We can create a new method on the Vue component just to log out values, but it’s very tedious to do it every time we want to see what kind of value a variable in the template contains. Instead, we can use an automatically registered component, as shown below.

Press + to interact
// BaseLog.vue (Vue 2)
<script>
export default {
	functional: true,
	props: ['log'],
	render(h, ctx) {
		process.env.NODE_ENV !== "production" && 
		   console.log(`%c LOG: `, 'background: #222; color: #bada55', ctx.props.log);
		   // eslint-disable-next-line
		return;
	},
};
</script>

Let’s look at ...