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.

You could try this approach: https://stackoverflow.com/q/40896261/3233827 — ssc-hrep3, Sep 22 '19 at 13:24

score -1 · Answer 1 · answered Sep 22 '19 at 13:18

-1

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

answered Sep 22 '19 at 13:18

Naveen Kashyap

87
1
1
11

score -1 · Answer 2 · answered Sep 22 '19 at 15:43

-1

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

answered Sep 22 '19 at 15:43

Filipe Machado Carneiro

88
7

That doesn't work: `[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of null (reading 'console')"` – rubebop Mar 03 '22 at 09:06

Vue JS console log without define a method

2 Answers2