javascript - Textarea update not persisting to database through vuejs $emit event, axios and laravel backend api
Get the solution ↓↓↓I am very new to vuejs, working on implementing a to-do list that can be updated after task creation. I have a child component for each row in a table containing the textarea to be updated that emits an event to the parent to-do list component that calls an update method with axios. The field I am trying to update is 'description'.
Child component code:
<textarea v-model="task.description" @blur="$emit('update', task)" />
<script>
export default {
props: {
task: {
type: Object,
required: true
}
Parent component code:
<ChildComponent
v-for="task in tasks"
:key="task.id"
:task="task"
:project="project"
@delete="deleteTask"
@update="updateTask"
/>
.
.
.
methods: {
async updateTask(taskData) {
try {
await this.$axios.patch(`projects/${taskData.project.id}/tasks/${taskData.id}`)
} catch (err) {
console.error(err)
}
}
Using vue devtools chrome extension, the event tab shows:
name:"update"
type:"$emit"
source:"<ChildComponent>"
payload:Array[1]
0:Object
created_at:"2020-07-07 14:01:46"
created_by:1
description:"Updated Task Description"
id:43
project:Object
project_id:1
updated_at:"2020-07-07 14:01:46"
However, the following is the JSON response from my api controller:
{"data":{
"id":43,
"created_by":1,
"project_id":1,
"description":"Original Description",
"created_at":"2020-07-07 14:01:46",
"updated_at":"2020-07-07 14:01:46"}
}
And the TasksController:
$task->update($request->all());
return response()->json([
'data' => $task,
], 202);
Currently, the textarea is not updating or persisting to the database. I don't know what I am missing. Any help is appreciated, I have tried implementing what I have found online without success.
Thank you!
Answer
Solution:
Looks like you're not PATCHing your data through to the server. Try the following:
async updateTask(taskData) {
try {
await this.$axios.patch(`projects/${taskData.project.id}/tasks/${taskData.id}`, taskData)
} catch (err) {
console.error(err)
}
}
The second parameter to$axios.patch
should be the data you'd like to send to the server.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: closed without sending a request; it was probably just an unused speculative preconnection
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.