将两个 REST 资源的结果合并到 vue-multiselect 中的分组项目

Question

我是javascript/vuejs的新手，我已经实现了一个vue-multiselect，其中我想有两个类别组，1是来自github的项目，第二个是第三方项目。

对于两者，我在下面编写了代码。如果我设置其中任何一个，它就可以工作 就像，要么this.projects = _projects要么this.projects = thirdParty，但如果我将列表thirdParty与_projects连接起来，它不起作用。

mounted() {
var _projects = [];
var thirdParty = [];
axios.get("http://127.0.0.1:5000/api/projects?placeholder=darwin")
.then(response => {
this.selectedBranch = "";
_projects = [{"projectType": "Github Projects", "grpValues": response.data.projects}]
console.log("Github" + response.data.projects);
console.log(_projects);
})

axios.get("http://127.0.0.1:5000/api/thirdparty")
.then(response => {
console.log(_projects);
thirdParty = [{"projectType": "Thirdparty Projects", "grpValues": response.data}]
_projects.concat(thirdParty);
this.projects = _projects
})

任何帮助将不胜感激。

Answer 1

concat不会更改现有数组，而是返回一个新数组。试试这个：

_projects = _projects.concat(thirdParty);

或者，更好的是，根本不_projects变异，而是直接分配给this.projects：

this.projects = _projects.concat(thirdParty);

或者，比两者都好，使用Promise.all一次添加它们：

async mounted() {
const [darwinProjectResponse, thirdPartyResponse] = await Promise.all([
axios.get("http://127.0.0.1:5000/api/projects?placeholder=darwin"),
axios.get("http://127.0.0.1:5000/api/thirdparty")
]);
this.projects = [{
"projectType": "Github Projects",
"grpValues": darwinProjectResponse.data.projects,
},{
"projectType": "Thirdparty Projects",
"grpValues": thirdPartyResponse.data,
}];
}