Question

我将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 - Invalid handler for event "click": got undefined

但似乎无法解决问题

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>

Answer 1

请将“方法”更改为“方法”

像这样：

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

Answer 2

我终于找到了。发生错误是因为我们调用了methods中找不到的函数。例如;我们在div中使用“增加”功能，但未在methods中定义此功能。当我们将此函数添加到方法中时，问题消失了。

[Vue警告]：事件“ click”的无效处理程序：未定义

2 个答案: