我如何发送v-modal数组为Axios参数?

Question

我有一个正常工作的Vue Multiselect实例，但我的v-model是一个数组(因为可以选择多个选项)。问题是，我想在loadExtraOptions方法中调用路由，该方法将id数组作为参数(id将是数组中每个索引的catNum值)。我在axios调用中设置了参数但它目前只是整个模型，我如何才能正确地为该参数发送id数组?

<multiselect
v-model="categoryModel"
:options="categoryOptions"
:multiple="true"
placeholder="Select Categories"
:close-on-select="true"
label="catNum"
track-by="catNum"
@select="loadExtraOptions"
></multiselect>
var vm = 
new Vue({
el: "#app",
props: { 
},
components: {Multiselect: window.VueMultiselect.default},
data: {
categoryModel: [],
categoryOptions: [],
},
methods: {
loadExtraOptions(){
console.log(this.categoryModel);
if(categoryModel.length > 0){
axios.get('/test/route/autocomplete/category',{
params: {
categories:this.categoryModel
}
})
.then((res) => {

})
.catch((error) => {

});
}
},
}
});

Answer 1

使用.map，您只能从模型中提取id。

this.categoryModel.map(category => category.id)

查询字符串形式的GET请求发送参数。因此，您需要将id作为字符串发送，而不是像下面格式那样作为数组发送。

// For example,
// categoryModel: [{id: 1}, {id: 2}, {id: 3}]
// result: 1,2,3
this.categoryModel.map(category => category.id).join(',')