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

Question

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

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

Answer 1

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

---

根据您提供的图片内容，我将为您提供解决这个问题的步骤和示例代码。

1. 确保HTTP请求参数正确： 您的请求看起来是正确的，但是需要确保URL和参数格式与后端API的要求一致。从您的代码片段来看，请求的URL是/company/001，并且使用了this.$http.get方法。

2. 从响应中提取数据： 在.then方法中，您需要从响应res中提取数据。根据您提供的第二张图片，后端返回的数据结构是{code: 200, data: {companyId: '001', postName: '前端开发', salary: 'xxxx'}}。

3. 处理响应数据： 在.then方法中，您需要正确地处理响应数据。根据您提供的代码片段，存在一些语法错误和逻辑问题。以下是修正后的代码示例：

   async getda() {
     this.companyId = '001';
     this.$http.get('/company/' + this.companyId).then(res => {
       // 从响应中提取数据
       let data = res.data; // 假设后端返回的数据结构是 {code: 200, data: {...}}
       if (data.code === 200) {
         // 将数据赋值给Vue组件的data属性
         this.postName = data.data.postName;
         this.salary = data.data.salary;
         // 显示成功消息
         alert('审批请求发送成功！！！');
       }
     }).catch(error => {
       // 处理错误情况
       console.error('请求失败:', error);
       alert('请求失败，请稍后再试！');
     });
   }
   

4. 确保Vue组件的data属性正确设置： 在Vue组件的data函数中，确保有postName和salary属性，这样它们就可以与form表单进行双向绑定。

   data() {
     return {
       postName: '',
       salary: '',
       companyId: ''
     };
   }
   

5. 页面上的数据绑定： 确保在页面的form表单中使用了v-model指令来绑定postName和salary。

   <form>
     <input v-model="postName" type="text" placeholder="职位名称">
     <input v-model="salary" type="text" placeholder="薪资">
     <!-- 其他表单元素 -->
   </form>
   

6. 参考资料：

   • Vue.js官方文档：Vue.js 官方文档
   • Axios HTTP库文档：Axios GitHub（如果您使用的是Axios作为HTTP客户端）

请注意，您的代码中this.$http.get可能是指Vue Resource，这是一个已经废弃的库，建议使用Axios或其他现代HTTP客户端库。如果您正在使用Vue 3，this.$http可能不可用，您可能需要使用axios或其他库来发送HTTP请求。

希望这些信息能帮助您解决问题。如果您有任何疑问或需要进一步的帮助，请随时告诉我。