Question

我开始在调试我从一个缺席的开发人员继承的应用程序时失去理智。我已经将问题缩小到代码中的以下位置（检查了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在控制台中返回'undefined'。我尝试过使用JSON.parse（）但没有成功。

将类型记录到控制台时：响应变量是状态为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>

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

谢谢

Answer 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已经被解析了。

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

Answer 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;
    });
},

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

2 个答案: