Vue: TypeError: _vm.myFunction is not a function

Question

我正在尝试在 .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() 是未定义的，或者当我在 data 中定义 sayHello() 时，它说sayHello() 已定义但从未使用过。

我什至尝试过执行以下操作：

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

但它给了我这个错误：

TypeError: Cannot read property 'log' of undefined

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

Answer 1

错误在这里

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

Answer 2

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

并且我编辑了语法以提高可读性。

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

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

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

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

Vue: TypeError: _vm.myFunction is not a function

Vue: TypeError: _vm.myFunction is not a function

events

button

event-handling

vue.js