Vue JS console log without define a method

Question

If I need to test an element and see what's happening at console. I'm defining a method and call it in a template like this.

<template>
  <button @click="logHello()"> My Button </button>
</template>

<script>
  methods: {
    logHello(){
      console.log('Hello world')
    }
  }
</script>

But I don't want to define a method at each time I need to log something. Is there is a way to log something just using template and not writing anything in an instance like this:

<button @click="console.log('Hello')"> My Button </button>

I know this one is not working but I'm looking for something similar.

Answer 1

in your template use two curly braces like this {{console.log('hello')}}

Answer 2

It is very simple, but not very recommended. To issue a console.log directly in the template you can use:

this.console.log('test')

For example:

<button @click="this.console.log('Hello')"> My Button </button>

I hope I helped in some way