Edit records based on click event in Laravel Inertia
For the editing option of a to do, we are going to do it from the list itself without using a modal component; what we will do is that, when we click on the SPAN of the to do name, we will place an INPUT in its place with the name of the to do that we are going to edit:
resources/js/Pages/Todo/Index.vue
<li v-for="t in todos" class="border py-3 px-4 mt-2" :key="t">
<span v-show="!t.editMode" @click="t.editMode = true">
{{ t.name }}
</span>
<TextInput v-show="t.editMode == true" v-model="t.name" @keyup.enter="update(t)" />
<button @click="remove" class="float-right">
***
</button>
</li>
***
update(todo) {
console.log(todo.name);
todo.editMode = false;
},As you can see in the previous code, for that, an option is used that does not come in the default list, called "editMode", and depending on its value:
true, we enter edit mode and thus hide the SPAN and show the text field.
false, we go into read mode and thus show the SPAN and hide the text field.
Thanks to the reactivity of Vue, when changing any option of the to do, such as the name or the "editMode" the changes will automatically be reflected in the template, it is important to note that we are creating v-models from the array of all the to do.
The to do update function is called on detecting the enter key: @keyup.enter="update(t)".
The to do update process:
El proceso de actualización del to do:
app/Http/Controllers/TodoController.php
public function update(Todo $todo, Request $request)
{
Todo::where("id", $todo['id'])->where('user_id', auth()->id())->update(['name' => $data['name']]);
return back();
}We create the route:
routes/web.php
Route::group([
'prefix' => 'todo',
'middleware' => 'auth:sanctum',
config('jetstream.auth_session'),
'verified'
], function () {
Route::get('/', [App\Http\Controllers\TodoController::class, 'index'])->name('todo.index');
Route::post('store', [App\Http\Controllers\TodoController::class, 'store'])->name('todo.store');
Route::put('update/{todo}', [App\Http\Controllers\TodoController::class, 'update'])->name('todo.update');
});Finally, we create the process to update the to do from the client:
resources/js/Pages/Todo/Index.vue
update(todo) {
todo.editMode = false;
router.put(route("todo.update", todo.id), {
name: todo.name,
});
},With this, by clicking on any of the list, we enter the editing mode:
Video Transcript
Now we go with the part of editing a whole that may seem simple and it is simple but there are several things that must be done the first thing is how you want to handle it since from the client 1 ways of doing it from the controller we no longer have so many options since it is the same a controller but from here you can do many things for example one would be to pass the information of the whole up here which I do not like very much because suppose we have 20 we all want to access the 20 that is down here and move over here to edit it because it may seem a little confusing because it is a lot of jumping so I prefer to edit it here directly as who says inline for that it is very simple even if we had there a couple of ways to do it since we can also edit what it is directly by setting countable to true to anything in this case a paragraph and there we can edit:
<p contenteditable="true">This is an editable paragraph.</p>Enable a text input for editing
So it would be something curious to see how we could also carry it out with Vue but we are not going to get to this since there is no need to complicate things further, so what are we going to do or what is my, as they say, the development that I propose? We are going to have the spam here that I don't know if we already have it or we throw the text there dry, perfect, we already have the SPAN, so if we hit a click event on it, we can associate it with anything, not just a button, we enter edit mode and how do we know this basically with this option that we are going to invent, that is, it is defined here directly in Vue since this is obviously not part of the model and if we are in edit mode we put a true on it and therefore it would enter this conditional and what we do is create a text field in this case of the input type that we already know and here we establish it as p model, which is one of the items in the list of all, let's say that here we have like two tricks, on the one hand, define the V-model in the following way with, as they say, with an option that is not defined perse in the data block but directly as part of all and on the other hand what is the use as who says these options of generated on demand for the rest here when giving a key enter then we use this method that we are going to implement this should be in bold because I think I have not implemented it and we enter the editing mode or rather there we edit our everything for the rest it would be necessary to create the controller nothing strange here very important that you put the user id to avoid that a user can edit the everything simply by the identifier of another user and we create the route and here we also put it well we do the update to the todo method that we have here
<li v-for="t in todos" class="border py-3 px-4 mt-2" :key="t">
<span v-show="!t.editMode" @click="t.editMode = true">
{{ t.name }}
</span>
<TextInput v-show="t.editMode == true" v-model="t.name" @keyup.enter="update(t)" />
<button @click="remove" class="float-right">
***
</button>
</li>
***
update(todo) {
todo.editMode = false;
router.put(route("todo.update", todo.id), {
name: todo.name,
});
},
So we're going to start here with the simplest thing, which would be the controller part. So here I create a method, I'm going to call it comate, in which we receive the todo that we want to edit, and here we also receive the request, I put request, and through there we do the todo operation. Where ID is equal to todo ID. It's also important that we do it like this because we already have or we know that it's an existing todo, since if we pass it something else, it would give a 44. So from here, what is the blocking by the user ID, we put we user ID, we take it from the authenticated user, very important, and here, once the clauses are placed, we update it, we put elate, and in this case it would only be for the name, so we put name, it will be equal to request, well, and you can, as I mentioned before, use some validations that you want to put on the request and other things that, well, I can do here too, it would be easy, it would be this, which I didn't put in the book, I should only put this, and here we access the Data, which in this case is name, it's the only thing we want to change, since what is the order and what is the user ID, that's obviously We don't change it at least not from here, which is only to update the name and that would be practically everything. Here we open the web one and here I have it. Here I am going to create my route, it would be of the put type:
public function update(Todo $todo, Request $request)
{
Todo::where("id", $todo['id'])->where('user_id', auth()->id())->update(['name' => $data['name']]);
return back();
}
Route::put('update/{todo}', [App\Http\Controllers\TodoController::class, 'update'])->name('todo.update');Perfect I'm fine there So here we place the els in this case associated with the input text that we have up here, well text input text input here I would place the Else since this will only be displayed when we are in edit mode, remember that here we have the negated therefore it would be displayed When this is true the negated would be false, this would be displayed, which is when we are in edit mode. Well, apart from this I place the v-model here, the next thing would be the @ keyup which is when we press a key, in this case we only want to hear the enter; so we place the enter modifier and here we indicate what it has to do, which is to call update:
<span v-show="!t.editMode" @click="t.editMode = true">
{{ t.name }}
</span>
<TextInput v-show="t.editMode == true" v-model="t.name" @keyup.enter="update(t)" />Perfect, here I say that even if it is, we could have problems with the form, let's see, notice that it appears there, we would have to cover it, I think we will do it later, but if not, it is simply one more option that indicates if you are creating, you are editing based on the last method or something like that to avoid this and you can place it here, I think we will do it later, but because it is so that you also have it in mind, for the rest, here we finish the operation and we can now edit our everything.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter