vue.js - Vue : TypeError: _vm. myFunction 不是函数

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() 是未定义的，或者当我定义 sayHello() 时data，它表示 sayHello() 已定义但从未使用过。

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

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

但它给了我这个错误:

TypeError: Cannot read property 'log' of undefined

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

Answer 1

您没有关闭标签 <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事件不一定需要用 () 调用方法.但是尽管这两种变体都是正确的。