首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么我的方法不是在实例上定义的

为什么我的方法不是在实例上定义的
EN

Stack Overflow用户
提问于 2020-09-24 05:14:21
回答 1查看 45关注 0票数 0

目前,我了解了Vue js,并完成了我的小全堆栈项目。我希望表单中的数据被发送到后端。这是我的Vue组件

代码语言:javascript
运行
复制
<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请求函数之前,我希望确保当我单击按钮时,数据会显示在控制台中。而不是数据,我得到了这个错误

代码语言:javascript
运行
复制
 [Vue warn]: Property or method "postData" is not defined on the instance but referenced during render.

我不明白错误,我一直在寻找答案,但错误仍然存在。任何答复都将不胜感激。提前谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-24 05:26:31

您有一个错误:methods而不是method

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64039943

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档