vue.runtime.esm.js？2b0e：619 [Vue 警告]：属性或方法"add"不在实例上定义，但在呈现过程中引用

Question

enter code here
<template>
<div id="app">
<h1>Hello</h1>
<button @click="add"></button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
methods:{
add:function(){
alert("hello");
}
}
}
}
}
</script>

vue新手，方法/函数有问题。这是在一个基本的App.vue组件中，我做错了什么？

Answer 1

方法不属于data属性：

<template>
<div id="app">
<h1>Hello</h1>
<button @click="add"></button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{}
},
methods:{
add: function() {
alert("hello");
}
}
}
</script>