CODEWITHSUNDEEP
vue.js
Vineet
Vineet

Reputation: 783

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

I am using vue js as my frontend framework and I have defined a @click event on a button. However, when I click it, I am getting following error:-

[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

I found a similar question at the following link:- VueJS - Invalid handler for event "click": got undefined

but does not seem to solve the problem

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>

Upvotes: 1

Views: 12487

Answers (2)

doğukan
doğukan

Reputation: 27421

I finally found it. An error occurs because we call a function not found in methods. For example; we use the "increase" function in a div, but we don't define this function in methods. When we add this function to methods, the problem disappears.

Upvotes: 2

Midhun
Midhun

Reputation: 1167

Please change "method" to "methods"

like this :

methods:{
        getArea(){
            this.ifLocation=false
            this.ifArea=true
        }
    }

Upvotes: 4

Related Questions