why my methods is not the defined on the instance

Question

I currently learn about Vue js and making my little full-stack project. I want the data from the form is sent to the backend. and this is my Vue component

<template>
  <div id="edit">
    <h3 align="center">Insert New Data</h3>
    <div id="form">
      <b-form-group id="input-group-1" label="Constructor" label-for="input-1">
        <b-form-input id="input-1" placeholder="Enter Constructor" v-model="teamConstructor"></b-form-input>
      </b-form-group>
      <b-form-group id="input-group-2" label="Team Principle" label-for="input-2">
        <b-form-input id="input-2" placeholder="Enter Team Principle" v-model="teamPrinciple"></b-form-input>
      </b-form-group>
      <b-form-group id="input-group-3" label="Team Base" label-for="input-3">
        <b-form-input id="input-3" placeholder="Enter Team Base" v-model="base"></b-form-input>
      </b-form-group>
      <b-form-group id="input-group-4" label="Power Unit" label-for="input-4">
        <b-form-input id="input-4" placeholder="Enter Power Unit" v-model="powerUnit"></b-form-input>
      </b-form-group>
      <b-form-group id="input-group-5" label="Car Chassis" label-for="input-5">
        <b-form-input id="input-5" placeholder="Enter Chassis Code" v-model="chassis"></b-form-input>
      </b-form-group>
      <b-form-group id="input-group-6" label="Driver Name" label-for="input-5">
        <b-form-input id="input-6" placeholder="Enter Driver Name" v-model="driver.name"></b-form-input>
      </b-form-group>
       <b-button class="mt-5" variant="primary" v-click="postData">Submit</b-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'edit',    
  data () {
    return {
      teamConstructor: '',
      teamPrinciple: '',
      base: '',
      powerUnit: '',
      chassis: '',
      driver: {
        name: ''
      }
    }
  },
  method: {
    postData () {
      let toPost = {
        teamConstructor: this.teamConstructor,
        teamPrinciple: this.teamPrinciple,
        base: this.base,
        powerUnit: this.powerUnit,
        chassis: this.chassis,
        driver: {
          name: this.name
        }
      }

      console.log(toPost)
     
    }
  }
}
</script>

before add post request function, I want to make sure when I click the button the data show up in the console. instead of data, I got this error

 [Vue warn]: Property or method "postData" is not defined on the instance but referenced during render.

I don't understand the error, I've been searching for the answer but the error still there. any answer would be appreciated. thanks in advance!

Answer 1

You have a typo: methods instead method