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>