I am having a simple issue but I can't quite figure out how to accomplish my goal here:
Essentially I have a modal form in VueJs that is able to Insert to the SQL database I have, so that that is set up correctly.
What I need to accomplish is being able to Edit (and this should also solve my delete problem as well) the data and have the user be able to submit those changes.
When the user hits edit, the same modal form should pop up and each input should be populated with data. Then the user can change what's inside each input to be able to Update the data and then submit those changes.
I've tried passing what I believe to be the id into the editClick and update functions but I keep getting "undefined." I've tried lots of minor changes to be able to pull that Id but it's just not getting passed through and I have no idea why:
Below is the relevant code snippets:
<b-table fixed hover outlined :items="movies" :fields="fields">
<template v-slot:cell(actions)="data">
<button
v-b-modal.modal-prevent-closing
@click="editClick(data.movies.id)"
>
<font-awesome-icon icon="fa-solid fa-file-pen" />
</button>
<button
class="px-2"
v-b-popover.focus="'Copy successful!'"
lg="4"
hover
>
<font-awesome-icon icon="fa-solid fa-copy" />
</button>
</template>
</b-table>
<b-modal id="modal-prevent-closing" ref="modal" @ok="handleOk">
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
id="fieldset-1"
label="Enter The Film's Title"
label-for="input-1"
>
<b-form-input
id="input-1"
v-model="form.name"
trim
></b-form-input>
</b-form-group>
<b-form-group
id="fieldset-2"
description="This is optional"
label="Enter A Description Of The Film"
label-for="input-2"
>
<b-form-textarea
id="input-2"
rows="6"
v-model="form.description"
trim
></b-form-textarea>
</b-form-group>
<b-form-group
id="fieldset-3"
label="Enter The Year The Film Was Released"
label-for="input-3"
>
<b-form-input
id="input-3"
v-model.number="form.releaseYear"
trim
></b-form-input>
</b-form-group>
</form>
<button class="my-1 float-end" lg="4" @click="deleteClick(data.id)">
<font-awesome-icon icon="fa-solid fa-trash" />
Delete Movie
</button>
</b-modal>
```
data: () => ({
movies: [],
fields: [
{ key: "name", sortable: true },
{ key: "description", sortable: true },
{ key: "releaseYear", sortable: true },
{ key: "actions", sortable: false },
],
form: {
name: "",
description: "",
releaseYear: "",
createdBy: 1,
},
}),
editClick(movie) {
console.log(movie);
this.form = {
name: movie.name,
description: movie.description,
releaseYear: movie.releaseYear,
};
},
async updateClick(movie) {
try {
const { form } = this;
await axios.put(`https://localhost:7222/api/motionpictures/${movie.id}`, {
Id: form.Id,
Name: form.name,
Description: form.description,
ReleaseYear: form.releaseYear,
createdBy: 1,
});
this.refreshData();
} catch {
// Error Handling
}
},
