<template>
<div class="card m-3">
<div class="card-body">
<Form method="post" @submit="submitData" :validation-schema="schema" ref="myForm" v-slot="{ errors, isSubmitting, handleReset }">
<div class="form-group col-5">
<Field name="id" type="hidden" class="form-control" v-model="id" />
<Field name="title" type="text" class="form-control" :placeholder="'Title'" v-model="post.title" :class="{ 'is-invalid': errors.title }"/>
<ErrorMessage name="title" />
</div>
<br/>
<div class="form-group col-5">
<Field name="author" type="text" class="form-control" :placeholder="'Author'" v-model="post.author" :class="{ 'is-invalid': errors.author }"/>
<ErrorMessage name="author" />
</div>
<br /><br />
<b-button variant="primary" type="submit" :disabled="isSubmitting" :class="{ 'submitting': isSubmitting }"> {{ buttonText }}</b-button>
<b-button variant="warning" @click="handleReset">Reset</b-button><br/>
</Form>
</div>
</div>
<br />
<br />
<table border="1" cellpadding="10" v-if="list != undefined && list.length">
<tr>
<td>Title</td>
<td>Author</td>
<td>Action</td>
</tr>
<tr v-for="post in list" :key="post.id">
<td>{{ post.title }}</td>
<td>{{ post.author }}</td>
<td>
<b-button variant="info" v-on:click="getEditUserDetails(post.id)"
>Edit</b-button
>
</td>
</tr>
</table>
<h1 v-else>No Records Found</h1>
</template>
<script>
import { createApp } from "vue";
import VueAxios from "vue-axios";
import axios from "axios";
import App from "../App.vue";
import { Form, Field, ErrorMessage } from "vee-validate";
import * as Yup from "yup";
const app = createApp(App);
app.use(VueAxios, axios);
export default {
name: "Posts",
components: {
Form,
Field,
ErrorMessage,
},
data() {
return {
post: {
title: null,
author: null,
},
list: undefined,
isEditMode: false,
id: null,
buttonText: "Add",
};
},
computed:{
schema() {
return Yup.object({
title: Yup.string().required("Title is required").nullable(),
author: Yup.string().required("Author is required").nullable(),
});
},
},
mounted() {
this.getUsers();
},
methods: {
submitData() {
if (this.isEditMode) {
axios
.put("http://localhost:3000/posts/" + this.id, this.post)
.then(() => {
this.isEditMode = false;
this.buttonText = this.isEditMode ? "Edit" : "Add";
this.id = null;
});
} else {
axios.post("http://localhost:3000/posts", this.post).then(() => {
this.buttonText = this.isEditMode ? "Edit" : "Add";
});
}
this.getUsers();
},
getUsers() {
axios.get("http://localhost:3000/posts").then((result) => {
this.list = result.data;
});
},
getEditUserDetails(id) {
axios.get("http://localhost:3000/posts/" + id).then((result) => {
this.id = result.data.id;
this.post.title = result.data.title;
this.post.author = result.data.author;
this.isEditMode = true;
this.buttonText = this.isEditMode ? "Edit" : "Add";
});
},
},
};
</script>
My vue/cli version is 4.5.13, vee-validate version is 4.4.11 and vue-axios version is 3.3.6
I am experiencing an issue where newly added data does not update in the input fields immediately when trying to edit the same data. However, selecting another available post before going back to the added post resolves the issue.