通过ID 查询数据库数据返回到页面，但是页面不知道如何获取值，对已经双向绑定的form表单数据进行回显

Question

通过ID 查询数据库数据返回到页面，但是页面不知道如何获取值，对已经双向绑定的form表单数据进行回显？
后端代码：

请求成功说明已经获取数据：

但是前端不知道如何获取后端返回的数据：

用data获取就不行？：

Answer 1

引自免费微信小程序：皆我百晓生

在您的代码中，您尝试访问 response.data，但似乎在某些情况下它可能未定义。这可能是由于异步操作的特性导致的，即在获取到数据之前，代码就已经执行到了试图访问 data 的部分。

为了解决这个问题，您可以使用 Vue 的特性来确保只有当数据可用时才尝试访问它。以下是建议的修改后的代码：

首先，在 Vue 组件的模板中，使用 v-if 指令来确保只有在数据存在时才渲染表单字段。这样可以防止在数据加载完成前尝试访问 data 导致的错误。

<template>
  <div v-if="reform">
    <!-- 在这里显示您的表单，例如 -->
    <input type="text" v-model="reform.data.companyId" placeholder="Company ID">
    <input type="text" v-model="reform.data.postName" placeholder="Post Name">
    <!-- 其他表单元素... -->
  </div>
</template>

然后，在 JavaScript 部分，添加一个默认值来初始化 reform，并处理可能的空值。

export default {
  data() {
    return {
      reform: null,
      companyId: '001',
    };
  },
  async methods: {
    async getDa() {
      try {
        const response = await this.shttp.get(`/company/s${this.companyId}`);
        if (response && response.data) {
          this.reform = response.data;
          alert("审批请求发送成功！");
        } else {
          console.error("Received an unexpected response from the server.");
        }
      } catch (error) {
        console.error('请求出错：', error);
      }
    },
  },
};

现在，当您调用 getDa() 方法时，表单将在数据加载完成后显示，并且不会因为尝试访问尚未定义的 data 而引发错误。如果服务器返回的数据结构发生变化，您可能需要相应地调整模板中的 v-models。