如何将 v-model 作为 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(',')

如何将 v-model 作为 Axios 参数的数组发送？

How can I sent v-modal as array for Axios params?

javascript

vue.js

axios

vue-multiselect