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

Question

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

是不是和后端返回值的方式有关？

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

根据您提供的截图和描述，我将提供一些指导帮助您解决前端页面获取并回显后端数据的问题。

后端代码分析

1. 后端返回数据：从您提供的截图【50e729e0-7ef7-44b3-8288-e8a9755287b6_40a054429cb046f08f86ce1fde44f1e6.png】来看，后端使用Spring Boot框架，通过@GetMapping注解处理GET请求，并调用companyService.load(companyId)方法获取数据。返回的数据是一个Company对象，该对象包含多个属性，如companyId、postName、salary等。

前端代码分析

1. Vue.js组件：根据截图【7eb14766-d050-4952-80fa-cdcb3f300def_6223718956b34fa3981cd29ce4f5e2e2.png】，前端使用Vue.js框架。getda方法通过this.$http.get发起异步请求，并尝试将响应数据赋值给companyInfo。这里存在一个小错误，字符串模板应该使用反引号（`）而不是普通引号（'）。

   const response = await this.$http.get(`/company/${this.companyId}`);
   

2. 数据回显：确保companyInfo对象与表单的双向绑定属性相匹配。例如，如果您的表单中有<input v-model="companyInfo.companyId">，则companyInfo应该是一个对象，其属性名与表单元素的v-model属性相匹配。

3. 错误处理：在getda方法中，您已经添加了错误处理逻辑，这是很好的实践。确保在发生错误时，提供适当的用户反馈。

4. 组件挂载：通过mounted钩子调用getda方法确保在组件加载时获取数据。

检查和修正

• 确保前端请求的URL与后端定义的路由匹配。
• 检查前端请求是否正确处理了后端返回的JSON数据。
• 确保前端组件的data函数返回的对象包含所有需要双向绑定的属性。
• 检查是否有任何拼写或语法错误，如方法名、属性名等。

示例代码

以下是修正后的getda方法示例：

async getda() {
  this.companyId = '001'; // 如果需要动态设置公司ID，这里可以修改
  try {
    const response = await this.$http.get(`/company/${this.companyId}`);
    this.companyInfo = response.data; // 将服务器返回的数据赋值给companyInfo
    alert('审批请求发送成功！' + response.data);
  } catch (error) {
    console.error('请求出错：', error);
  }
}

参考资料

• Vue.js官方文档：https://vuejs.org/v2/guide/
• Axios（Vue.js常用的HTTP客户端）官方文档：https://github.com/axios/axios

请根据这些指导检查和修正您的代码，如果问题仍然存在，请提供具体的代码片段或错误信息，以便进一步分析和解决。