Revision history [back]

It is not recommended to use console.log or console.error directly within a Vue template. Instead, you can use data properties or computed properties to store and manipulate data, and use methods or lifecycle hooks to handle logic and output any necessary logging.

For example, you can create a data property to store an error message and use it in a computed property or method to display the message to the user and log the error to the console:

<template>
  <div>
    <p v-if="errorMessage">{{ errorMessage }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      errorMessage: null
    }
  },
  methods: {
    handleClick() {
      // Do some logic that may result in an error
      try {
        // ...
      } catch (error) {
        this.errorMessage = 'An error occurred'
        console.error(error)
      }
    }
  }
}
</script>

In this example, clicking the button triggers the handleClick method, which may potentially throw an error. If an error occurs, the error message is set to 'An error occurred' and the error is logged to the console using console.error. The error message is then displayed to the user with a v-if directive.