Vue点击按钮调用函数报错_ctx.hello is not a function的解决方法

你遇到的_ctx.hello is not a function错误，根源有两个：

1. 方法定义的键名错误 #

在Vue组件的选项中，方法必须放在**methods（复数）**对象里，你写成了单数的method，导致Vue无法识别这个方法，模板自然找不到hello函数。

2. 按钮的指令语法错误 #

v-on : click的写法不符合Vue语法规范，v-on和:click之间不能有空格，正确写法是v-on:click，或者更简洁的@click语法糖。

修正后的完整代码 #

<template>
<div>
    <h1>Hello from Home component</h1>
    <!-- <h2>{{data}}</h2>
    <h2>{{msg}}</h2> -->
    <button @click="hello('hello call')">
        Click
    </button>
</div>
</template>

<script>
export default {
    name:'HomeVue',
    props:{
        data: String,
        msg: String
    },
    methods:{
        hello(data){
            alert(data)
        }
    }
}
</script>

修改后重新启动项目，点击按钮就能正常触发hello函数。

内容的提问来源于stack exchange，提问作者Sakshi Rana