Using laravel routing to update 1 VUE prop only and leave the rest unchanegd

Hello, so right now I have a vue page that accepts these props:

defineProps({
    Projects: ref(Array),
    CurruntProject:ref(Object),
    Tasks: ref(Array),
    DoneTasks: ref(Array),
    AddTask: ref(false),
})

I have a controller method in laravel that updates values in Tasks but it wont display the updated values in the page unless I refresh it , so what I want to do is to redirect to the previous route with all other props having their old values except for Tasks and have the updated values show in the front-end without refreshing.

this code describes what I ballistically want to do (and I know it is wrong I just want the right equivalent of that , sorry for horrible code )

        return redirect()->route(('project.show',$project),[
            'Tasks'=> $Tasks,
        ]);

Thank you!

gych

2 years ago

Level 29

Can you share the Vue script code that includes the post/put/patch request used to update the Tasks.

john123

2 years ago

Level 1

@gych

that is the line in the component that calls the controller function to update, I am using inertia router

import {router} from "@inertiajs/vue3";

   router.put(route('updatePriority',updatedTasks));

and that is what is happening inside the controller up to the return statement that I want to make

public function updatePriority(Request $request){
        $Tasks = [];
       
        $project = Project::find($request->_value[0]['project_id']);

        foreach ($request->_value as $UpdatedPriorityTask){
            $oldTask = Task::find($UpdatedPriorityTask['id']);
            $oldTask->priority = $UpdatedPriorityTask['priority'];
            $oldTask->save();
            array_push($Tasks,$oldTask);
        }
        return redirect()->route(('project.show',$project),[
            'Tasks'=> $Tasks,
        ]);
}

gych

2 years ago

Level 29

@john123 Try to use preserveState: false

router.put(route('updatePriority', updatedTasks), {
	preserveState: false,
});

john123

2 years ago

Level 1

@gych the purpose of this method is that when I drag and drop items in a list the order changes with them and stays that way , now when I drag and drop the items the front end shows the correct item arrangement, however if I try to change the name of the item in the new place the edit shows me that I am editing the value of the item that was there before moving them around. that means that the items in the back-end did not move when the front end moved , although it moves with it after refresh

since the return statement I want to make is full of errors that is my current return statement:

  return redirect()->back();

john123

2 years ago

Level 1

OK I Solved it , the mistake I made was that I forgot to add :key to my list elements , so vue had a problem differentiating between these elements whenever I made a change, sorry for wasting your time and thank you for your efforts!!

gych

2 years ago

Level 29

@john123 Good that you managed to solve it :) When you use :key in your code, the component will re-render whenever the value changes. It's best practice to always use it in cases like this.

1 like

Please or to participate in this conversation.