Vue: TypeError: _vm.myFunction is not a function

Question

I am trying to add a simple button in a .vue file to log something to the console with this code:

<template>
  <div>
    <button v-on:click="sayHello()">Click me</button> 
  </div>
</template>
<script>
export default {
  data() {
  },
  methods: {
    sayHello: function () {
      console.log('Hello!')
    }
  },
};

I get the following errors in the console:

TypeError: _vm.sayHello is not a function

and

Property or method "sayHello" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

I have seen some tutorials saying that you should add it to data, but it just says that sayHello() is undefined, or when I define sayHello() in data, it says sayHello() is defined but never used.

I have even tried just doing the following:

<button v-on:click="console.log('Hello!')">Click me</button>

but it gives me this error:

TypeError: Cannot read property 'log' of undefined

Can someone please help me with this? It's probably something super obvious that I haven't tried.

Valerii Strilets · Accepted Answer · 2022-05-13 09:10:52Z

4

You didn't close tag <script> after export default { ... }.

And I edited syntax for better readability.

<template>
  <div>
    <button @click="sayHello">Click me</button> 
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    sayHello() {
      console.log('Hello!');
    },
  },
};
</script>

For the click events not necessarily a need to call a method with (). But though both variants are correct.

edited May 13, 2022 at 9:10

answered Feb 1, 2021 at 10:09

Valerii Strilets

3182 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oleksii · Accepted Answer · 2021-02-01 10:12:43Z

1

The error is here

wrong
v-on:click="sayHello()" 


correctly
v-on:click="sayHello"

<template>
  <div>
    <button @click="sayHello">Click me</button> 
  </div>
</template>
<script>
export default {
  data() {
  },
  methods: {
    sayHello () {
      console.log('Hello!')
    }
  },
}

edited Feb 1, 2021 at 10:12

answered Feb 1, 2021 at 10:06

Oleksii

2,7613 gold badges10 silver badges22 bronze badges

Collectives™ on Stack Overflow

Vue: TypeError: _vm.myFunction is not a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related