添加新Post并尝试编辑同一Post后，字段仍然为空

Question

<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>
&nbsp;&nbsp;&nbsp;
<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>

我的vue/cli版本是4.5.13,vee-validate版本是4.4.11,vue-axios版本是3.3.6

每当我添加新的数据，并试图立即编辑相同的数据，但v-model没有得到更新，所以我的输入字段仍然是空的，当点击另一个可用的帖子，并再次点击添加的帖子它的工作很好。

Answer 1

您可能因为list: undefined数据而失去反应性。我假设您正在接收来自axios.get()

的数组说到这里，我会尝试:

data() {
return {
post: {
title: null,
author: null,
},
list: [], // Define default value as an array
isEditMode: false,
id: null,
buttonText: "Add",
};
},
....
methods: {
....

getUsers() {
axios.get("http://localhost:3000/posts").then((result) => {
this.list = [ ...result.data]
})
},
}

为您的表

<table border="1" cellpadding="10" v-if="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>