Sometimes, we want to use console.log or console.error in a Vue.js template.

In this article, we’ll look at how to use console.log or console.error in a Vue.js template.

How to use console.log or console.error in a Vue.js template?

To use console.log or console.error in a Vue.js template, we can create a method that calls them and then call the method in our template.

For instance, we write

<template>
  <div>
    <input @keydown="debug" />
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    debug(event) {
      console.log(event.target.value);
    },
  },
  //...
};
</script>

to define the debug method.

And then we set @keydown to debug to call it when we’re typing into the input.

Conclusion

To use console.log or console.error in a Vue.js template, we can create a method that calls them and then call the method in our template.