Vue + Laravel API CRUD -更新方法问题

mctunoxg  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(183)

我正在尝试用Laravel 9和Vue JS 3创建一个基本的CRUD应用程序。我的问题是该方法似乎根本无法正常运行。
来自Laravel API的Update方法工作正常(我在Postman中测试了这个方法,它工作得很好)。
所以我认为问题出在我的方法或变量中?handleUpdate()函数似乎没有捕捉到联系人变量(contact.name,contact.email ...)的值
在页面加载时,它检索联系人数组的所有属性,但在保存时返回一个500内部服务器错误。
任何帮助都将不胜感激。

<template>
   <h1>EDIT EMPLOYEE INFORMATION</h1>
   <p>Profile for {{ contact.name }}</p>

<form @submit.prevent="handleUpdate" class="mt-5">
  <label>User Full Name</label>
  <input type="text" v-model="contact.name" required>
  <label>Email Address</label>
  <input type="text" v-model="contact.email" required>
  <label>Job Title</label>
  <input type="text" v-model="contact.job_title">
  <label>Contact No.</label>
  <input type="text" v-model="contact.contact_no">
  <button>Edit User</button>
</form>
</template>

<script>
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import axios from 'axios'

export default {
    name: 'EditView',
    setup() {

    const route = useRoute()
    const error = ref('')
    const contact = ref({})

    const getContactById = async () => {
        
    try{
        const res = await axios.get(`http://localhost:8000/api/get_contact/${route.params.id}`)
        contact.value = res.data
      }
      catch(err){
        error.value = err.message
        console.log(error.value)
      }
    }

    const handleUpdate = async () => {        
        try{
            await axios.post(`http://localhost:8000/api/update_contact/${route.params.id}`, 
            {
                name: contact.name,
                email: contact.email,
                job_title: contact.job_title,
                contact_no: contact.contact_no
            })
            .then((response) => {
                console.log(response)
            })
            .then(() => router.push({ name: 'home'}))                
            }
            catch(err){
                error.value = err.message
            }
    }

    onMounted(() => {
        getContactById()
        console.log(contact.value)
    })

    return { contact, handleUpdate }
    }
}
</script>

<style>

</style>
xuo3flqw

xuo3flqw1#

看来问题确实出在vue文件上。
我无法从handleUpdate方法传递联系人变量。传递联系人变量,现在一切似乎都工作得很好。

<form @submit.prevent="handleUpdate(CONTACT)" class="mt-5">
  <label>User Full Name</label>
  <input type="text" v-model="contact.name" required>
  <label>Email Address</label>
  <input type="text" v-model="contact.email" required>
  <label>Job Title</label>
  <input type="text" v-model="contact.job_title">
  <label>Contact No.</label>
  <input type="text" v-model="contact.contact_no">
  <button>Edit User</button>
</form>
</template>

同样对于该方法:

const handleUpdate = async (CONTACT) => {        

        try{
            const response = await axios.post(`http://localhost:8000/api/update_contact/${route.params.id}`, 
            {
                name: contact.name,
                email: contact.email,
                job_title: contact.job_title,
                contact_no: contact.contact_no                
            })
            .then((response) => {
                console.log(response)
                // console.log(editName.value)
            })
            .then(() => router.push({ name: 'home'}))                
            }
            catch(err){
                error.value = err.message
            }
    }

相关问题