组件方法响应对象数据绑定答案

【问题标题】：Component method response object data binding组件方法响应对象数据绑定
【发布时间】：2018-02-13 10:25:16
【问题描述】：

我开始在调试一个我从不在场的开发人员那里继承的应用程序时失去理智。我已将问题缩小到代码中的以下位置（检查了 php 文件，初始化了 Vue 实例，没有语法错误）。

这是我初始化的组件：

var RadniStol = Vue.component('radnistol', {
template: '#template-RadniStol',
data() {
  return {
    tableData: [],
    requestData: {
      sort: "ID",
      order: "DESC"
    }
  }
},
 methods: {
  reloadTable: function (event) {
      data = this.requestData;
      this.$http.post('php/get/radni_stol.php', data).then(response => {
        console.log(response.data.bodyText);
          this.tableData = response.data.records;
      });
  },
.
.
.

使用 POST 方法调用的 PHP 文件工作正常，查询数据库并以 JSON 格式回显响应。

让我拔掉头发的原因如下：console.log(response.data) 将以下内容输出到控制台：

{"records":[{"DODAN_NA_RADNI_STOL":"1","..."}]}

这是一个我期望拥有的 JSON 对象，但在尝试将其分配给组件的数据时：

this.tableData = response.data;

或任何其他方式... response.data.records 在控制台中返回“未定义”。我试过 JSON.parse() 但没有成功。

将类型记录到控制台时： response 变量是一个响应对象，状态为 200，body 和 bodyText 包含来自数据库的数据。 response.data 是一个字符串类型，包含字符串 JSON 和数据库中的数据。

当尝试在 POST 方法的回调中的任何内容上使用 JSON.parse(response.data) 或 JSON.parse() 时，我在控制台中收到以下错误：

RadniStol.js?version=0.1.1:17 Uncaught (in promise) SyntaxError: Unexpected token in JSON at position 0 at JSON.parse (<anonymous>) at VueComponent.$http.post.then.response (RadniStol.js?version=0.1.1:17) at <anonymous>

我真的开始对这个问题失去理智了，请帮忙！

谢谢

【问题讨论】：

当您执行response.data.bodyText 时，控制台打印的内容是什么？或者尝试在打印 response.data.records 时设置断点并检查从后端获取的内容并进行调试。
试图从 response.data 访问任何内容返回“未定义” php 文件返回我期望的数据，但问题在于访问数据
你能显示来自服务器端的数据吗？例如response。您可以使用 pastebin 粘贴所有数据。
我无法显示数据，因为它是敏感的，而不是我的所有权，但是当我检查它时，它是一个有效的响应对象，数据字段中有一个 JSON 对象。后端部分很好，我检查了 PHP 脚本和数据库查询，一切都很好。在我看来，问题出在 Vue 或 javascript 方面
如果您认为一切都很好，那么 response.data 应该为您提供后端发送的 JSON。我明白，数据是敏感的。您可以修改和显示虚拟数据。否则我帮不了你。

标签： vue.js vuejs2

【解决方案1】：

如果response.data是字符串，里面有JSON，那么要访问records字段，你应该像这样解码它：

JSON.parse(response.data).records

不确定这与 PHP 或 Vue.js 有什么关系，这只是普通的 javascript 问题。

如果它没有解码，那么问题肯定出在response.data。例如

{"records":[{"DODAN_NA_RADNI_STOL":"1","..."}]}

不是有效的 JSON，因为键 "..." 需要有一些值。

但在我看来，response.data 已经被解析了。

我建议你做的是将响应的处理程序编写为单独的函数，手工制作模拟实际响应对象的响应对象，然后将其与请求分开测试。因此，您可以向我们展示与它一起使用的请求对象和函数。

【讨论】：

我忘了说我试过了，编辑了我的问题，包括那个错误，谢谢
另外，“...”只是我输入的内容，所以我不会粘贴整个 JSON，与我的代码相同

【解决方案2】：

我遇到了同样的错误并修复了它。
结果将是 response.body 而不是 response.data。
这是我的代码：

getS: function(page) {
    this.$http.get('vue-manager?page=' + page).then((response) => {
        var data = JSON.parse(response.body); 
        this.student = data.data.data;
        this.pagination = data.pagination;
    });
},

【讨论】：