添加新帖子并尝试编辑同一帖子后，该字段仍为空

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

尝试等待响应：

async submitData() {
  if (this.isEditMode) {
    await axios
      .put("http://localhost:3000/posts/" + this.id, this.post)
      .then(() => {
        this.isEditMode = false;
        this.buttonText = this.isEditMode ? "Edit" : "Add";
        this.id = null;
    });
  } else {
    await axios.post("http://localhost:3000/posts", this.post).then(() => {
      this.buttonText = this.isEditMode ? "Edit" : "Add";
    });
  }
  await this.getUsers();
},
async getUsers() {
  await axios.get("http://localhost:3000/posts").then((result) => {
    this.list = result.data;
  });
},
async getEditUserDetails(id) {
  await 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";
  });
},

Answer 2

您可能因为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>