如何将 Axios 请求的（过滤的）响应分配给 VueJS 中的变量？

Question

我有一个 Axios 请求，响应是一个对象：

我已经像这样过滤了响应：

response.data.value_table_cols.map(col => col.header)

结果得到以下数组 - 与上图相关的是 value_table_rows:

下的数据

["row 1", "row 2", "row 3"]

当您将 response.data.value_table_cols.map(col => col.header) 登录到控制台时，它会生成上述数组。那么，如何将 response.data.value_table_cols.map(col => col.header) 分配给一个名为 allOfTheRows 的数据变量？

在 Vue JS 页面中：

data: () => ({
      allOfTheRows: []
}),

我的 Axios 请求：

    getTable(table) {
        var self = this;

        axios.get(window.routes["value-tables.get"].replace("{value_table}", table.id))
            .then(function (response) {
                self.$refs.hotTableComponent.hotInstance.loadData(response.data.value_table_rows.map(row => row.value_table_cells));
                this.allOfTheRows = response.data.value_table_rows.map(row => row.header)
                console.log(response.data.value_table_rows.map(row => row.header));
            })

            .catch(function(error){
                console.error(error);
                if (!!error.response) console.log(error.response);
            });
    },

按照第一个答案的指示，我重写了请求：

    getTable(table) {
        var self = this;

        apiClient.get(window.routes["value-tables.get"].replace("{value_table}", table.id))
            .then(function (response) {
                self.$refs.hotTableComponent.hotInstance.loadData(response.data.value_table_rows.map(row => row.value_table_cells));
                this.allOfTheRows = response.data.value_table_rows.map(row => row.header)
            })

            .catch(function(error){
                console.error(error);
                if (!!error.response) console.log(error.response);
            });
    },

但是它给出了以下错误：

Answer 1

通过做：

apiClient.get(window.routes["value-tables.get"].replace("{value_table}", table.id))

        .then((response) => {
                   this.allOfTheRows = response.data.value_table_rows.map(row => row.value_table_cells));
             }

注意我将函数更改为箭头以获得 this

的隐式绑定

此外，我会在一个单独的方法中执行映射函数，以便 space 也进行一些验证

如何将 Axios 请求的（过滤的）响应分配给 VueJS 中的变量？

How to assign the (filtered) response of an Axios request to a variable in VueJS?

arrays

google-chrome-devtools

vue.js

axios