我使用 vue js 作为前端框架，并在按钮上定义了 @click 事件。但是，当我单击它时，出现以下错误：-

[Vue warn]: Property or method "getArea" 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.

[Vue warn]: Invalid handler for event "click": got undefined

found in

---> <ElButton> at packages/button/src/button.vue
       <ElCard> at packages/card/src/main.vue
         <ElCol>
           <ElRow>
             <ElCol>
               <ElRow>
                 <ElHeader> at packages/header/src/main.vue
                   <ElContainer> at packages/container/src/main.vue
                     <ProgressBar> at src/views/Map/components/ProgressBar.vue

我在以下链接中发现了类似的问题：- VueJS - 事件“click”的处理程序无效：未定义

但似乎没有解决问题

ProgressBar.vue

<template>
  <el-col class="progress-bar-icon" :span="6">
    <span class="step-text">Step-2<br/></span>
    <el-button id="two" class="icon" icon="el-icon-location-outline" circle></el-button>
      <el-card v-if="ifLocation" class="dialog-box-card">
        <h4 class="heading">Pin Down Your Roof On The Map</h4>
        <el-button type="primary" round @click="getArea">Next <i class="el-icon-arrow-right"></i>
        </el-button>
      </el-card>
  </el-col>
</template>

<script>
export default {
    name:'progress-bar',
    data(){
        return {   
            ifLocation:true,
            ifArea:false,
        }
    },
    method:{
        getArea(){
            this.ifLocation=false
            this.ifArea=true
        }
    }
};
</script>

index.vue

<template>
  <div>
    <progress-bar></progress-bar>
  </div>
</template>

<script>
import ProgressBar from './components/ProgressBar';

export default {
  name:'index',
  components:{
    'progress-bar':ProgressBar,
  },

};
</script>