Блог

В настоящее время я изучаю Vue js и создаю свой маленький проект с полным стеком. Я хочу, чтобы данные из формы отправлялись на серверную часть. и это мой компонент Vue

 <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>
  

прежде чем добавлять функцию запроса post, я хочу убедиться, что при нажатии кнопки данные отображаются в консоли. вместо данных я получил эту ошибку

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

Я не понимаю ошибки, я искал ответ, но ошибка все еще существует. любой ответ будет оценен. заранее спасибо!

У вас опечатка: methods вместо method