Vue单选按钮组报错.map is not a function的解决咨询

问题原因 #

你猜的没错——单选按钮绑定的选中值不再是数组，而是单个对象（或对应的值），而map是数组的专属方法，直接在对象上调用就会报categoryParams.map is not a function错误。

修改方案 #

1. 调整数据初始化 #

把原来用于多选的数组类型变量改为单个对象类型（在Vue的data中）：

// 原代码
// categoriesSelected: []

// 修改后
categoriesSelected: null // 或初始化为空对象 {}，根据你的选项结构决定

2. 重写筛选参数处理函数 #

修改prepareQueryStringFromSelectedCategories，适配单个对象的场景，同时保持返回格式和原逻辑一致（返回slug数组，避免后端接口改动）：

prepareQueryStringFromSelectedCategories(categoryParam) {
    // 单选场景下，若有选中项则返回包含单个slug的数组，无选中则返回空数组
    return categoryParam ? [categoryParam.slug] : [];
}

如果需要兼容未来可能切换回多选的场景，可以写一个兼容数组和单个对象的版本：

prepareQueryStringFromSelectedCategories(categoryParams) {
    if (Array.isArray(categoryParams)) {
        return categoryParams.map(element => element.slug);
    } else {
        return categoryParams ? [categoryParams.slug] : [];
    }
}

3. 确认单选按钮绑定逻辑 #

确保单选按钮的v-model正确绑定到categoriesSelected，示例代码：

<template>
  <div v-for="category in categories" :key="category.id">
    <input 
      type="radio" 
      v-model="categoriesSelected" 
      :value="category" 
      id="category-{{ category.id }}"
    >
    <label for="category-{{ category.id }}">{{ category.name }}</label>
  </div>
</template>

这样修改后，payload中的categories字段会保持和原来一样的数组格式（单个slug元素或空数组），完全适配单选的筛选需求。

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