我正在尝试用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>
1条答案
按热度按时间xuo3flqw1#
看来问题确实出在vue文件上。
我无法从handleUpdate方法传递联系人变量。传递联系人变量,现在一切似乎都工作得很好。
同样对于该方法: