任务未更新,并且不断获取ID未定义错误

时间:2018-12-04 18:31:33

标签: express vue.js sequelize.js

我的小应用程序出现问题,我的个人资料页面需要显示可以编辑的联系方式,因此当我尝试更新时,就会出现此错误 更新profile_contacts设置phone ='1111111111',linkedin_profile ='http:linkedin.com'其中id ='undefined'

当前,在MySQL,sequelize,node.js,express和vue.js中使用的技术。

<template>
  <b-modal id="editContactInfo" title="Edit your contact information" size="lg">
    <b-form>
      <b-form-group id="phoneGroup" label="Phone" label-for="phoneInput">
        <b-form-input id="phoneInput" type="text" v-model="form.phone" ref="focusThis"></b-form-input>
      </b-form-group>
      <b-form-group id="emailGroup" label="Email" label-for="emailInput">
            <b-form-input id="emailInput" type="email" v-model="form.email" readonly></b-form-input>
      </b-form-group>
      <b-form-group id="linkedInProfileGroup" label="LinkedIn profile" label-for="linkedInProfileInput">
        <b-form-input id="linkedInProfileInput" type="text" v-model="form.linkedin_profile"></b-form-input>
      </b-form-group>
     </b-form>
    <div slot="modal-footer" class="w-100">
        <div class="float-right">
          <b-btn type="reset" variant="outline-secondary" class="mr-2" @click="hideModal">Cancel</b-btn> 
          <b-btn type="submit" variant="primary" @click="updateContact()">Update</b-btn>
        </div>
    </div>
   </b-modal>
</template>


<script>
import axios from 'axios'
export default {

  data () {
    return {
      form: {
        id: this.id,
        email: this.email,
        phone: this.phone,
        linkedin_profile: this.linkedin_profile
      }
    }
  },

  methods: {
    focusMyElement (e) {
      this.$refs.focusThis.focus()
    },
    hideModal () {
      this.$root.$emit('bv::hide::modal','editContactInfo')
    },

 //UpdateConnection for Contact Information

    updateContact () {
      axios.put(`http://localhost:5000/api/contacts/${this.id}`,
        { 
          id: this.form.id,
          phone: this.form.phone,
          linkedin_profile: this.form.linkedin_profile })
        .then((res) => {
          this.form.id = ''
          this.form.phone = ''
          this.form.linkedin_profile = ''
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })

     }
  }
}
</script>

api
 // Update contact
router.put("/:id", (req, res) => {
    if (!req.body.phone,
        !req.body.linkedin_profile) {
        res.status(400)
        res.json({
            error: "Bad Data"
        })
    } else {
        Contact.update(
            { phone: req.body.phone,
              linkedin_profile: req.body.linkedin_profile},
            { where: { id: req.params.id } }
        )
        .then(() => {
           res.send("Contact updated")
        })
        .error(err => res.send(err))
    }
})

0 个答案:

没有答案