[Vuejs]-@click in vuejs component will not react in any way

by

0👍

Try it the way, it’s described in the documentation by adding a method in the script block and refer to that method:

<template>
   <div class="container" id="app">
     <button @click="log('hallo')">
         Hello
     </button>
 </div>
</template>


<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        log(text) {
            console.log(text)
        }
    }
}
</script>

It’s a good practise to add the .prevent to the @click notation to prevent the default behaviour like a post / refresh

@click.prevent="myFunction"

0👍

You should definitely be getting an error.

The reason it’s not working though is everything you use in the template is essentially prefixed with this so your code is trying to call this.console.log which doesn’t exist.

I typically have a global mixin method called log that logs whatever arguments are passed to it.

Vue.mixin({
  methods: {
    log () {
      if (console && process.env.NODE_ENV !== 'production') {
        console.log(...arguments)
      }
    },
  },
})

Leave a comment