Vue.js新手求助：API请求结果无法赋值给data数据

你遇到的核心问题是JavaScript的引用类型赋值逻辑：当你把data中的数组（比如value.data或chartData）作为参数传给getData的targetDataSetName时，函数里直接执行targetDataSetName = responseData.data只是把targetDataSetName这个局部变量的指向换成了新数组，并没有修改原data中数组的内容，所以Vue的响应式系统检测不到变化，页面也不会更新。

有两种简单的修复方式，选一种适合你的场景即可：

方法1：修改原数组的内容（保持引用不变） #

不需要改变调用方式，只需要修改getData里的赋值逻辑，通过修改原数组的内容来触发响应式更新，而不是替换整个数组：

getData(payload, targetDataSet) {
    var url = "url";
    this.sendRequest(
        url,
        "POST",
        payload,
        function (responseData) {
          if (responseData.isOK) {
            // 清空原数组，再把新数据批量加入，保持原引用不变
            targetDataSet.splice(0, targetDataSet.length);
            targetDataSet.push(...responseData.data);
          } else {
            this.makeToast(responseData.message, "danger");
            console.log("Error getting data");
          }
        }.bind(this)
    );  
}

原理：splice是直接修改数组本身的方法，Vue能检测到这类数组变更；push(...新数组)批量添加数据，同样会触发响应式更新。

方法2：传递目标数据的定位信息（更直接） #

如果不想用修改数组内容的方式，可以传递能直接访问data中目标的路径，比如对于dropList的项传递索引，对于chartData传递字段名，直接修改Vue实例上的data属性：

修改调用逻辑 #

getDropListData() {
    this.dropList.forEach( (value, index) => {
        var config = {
            expression: value.expresion,
            applyDimensionRights: true,
        };
        // 传递dropList的索引，指定要修改的项
        this.getData(JSON.stringify(config), 'dropList', index);
    });
},

datasourceExecute() {
    var config = {
        expression: "expression_3",
        applyDimensionRights: true,
    };
    // 传递目标字段名，指定要修改chartData
    this.getData(JSON.stringify(config), 'chartData');
},

修改getData方法 #

getData(payload, targetKey, index) {
    var url = "url";
    this.sendRequest(
        url,
        "POST",
        payload,
        function (responseData) {
          if (responseData.isOK) {
            if (typeof index !== 'undefined') {
                // 修改dropList对应索引项的data
                this[targetKey][index].data = responseData.data;
            } else {
                // 修改chartData
                this[targetKey] = responseData.data;
            }
          } else {
            this.makeToast(responseData.message, "danger");
            console.log("Error getting data");
          }
        }.bind(this)
    );  
}

原理：直接修改Vue实例上data的属性，Vue的响应式系统会自动检测到变化并更新视图。

• 如果你用的是Vue 2，修改对象属性（比如this.dropList[index].data）属于响应式变更，不需要额外处理；如果是直接替换数组的索引项（比如this.dropList[index] = {...}），才需要用Vue.set触发响应。
• 两种方案都能让你复用getData方法，只需要修改传入的配置和目标定位信息即可。

内容的提问来源于stack exchange，提问作者Alexander Odnoromanenko