Vue：TypeError：_vm.myFunction 不是函数

如何解决Vue：TypeError：_vm.myFunction 不是函数

我正在尝试在 .vue 文件中添加一个简单的按钮，以使用以下代码将某些内容记录到控制台：

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

我在控制台中收到以下错误：

TypeError: _vm.sayHello is not a function

和

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.

我看过一些教程说你应该把它添加到数据中，但它只是说 sayHello() 是未定义的，或者当我在 sayHello() 中定义 data 时，它说 {{ 1}} 已定义但从未使用过。

我什至尝试过以下操作：

sayHello()

但它给了我这个错误：

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

有人可以帮我解决这个问题吗？这可能是我没有尝试过的非常明显的事情。

解决方法

您没有在 <script> 之后关闭标记 export default { ... }。

为了更好的可读性，我编辑了语法。

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

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

对于 click 事件不一定需要调用带有 () 的方法。但尽管两种变体都是正确的。

,

错误在这里

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!')
    }
  },}