Vue .map is not a function on radio button group

I have a Vue app running a filter with Checkboxes and everything works fine for selecting multiple options. What I want to do is set it up to only allow one selection ie. Change input type to radio. The following function that worked with checkboxes throws this error in devtools console when changing the type to radio buttons…

categoryParams.map is not a function

Is this because it is now an Object and not an array? This is the function in question…

categories: []

let payload = {
              
    categories : this.prepareQueryStringFromSelectedCategories(this.categoriesSelected),
                  
};

prepareQueryStringFromSelectedCategories(categoryParams) {
    return categoryParams.map(element => element.slug);
}

What would the solution be to convert the checkbox array to allowing a radio button to be selected to filter?

Thanks

>Solution :

Is this because it is now an Object and not an array? This is the function in question…

Yes. .map() is a function on native Javascript arrays, nothing specific to Vue. According to the Vue documentation, the bound variable in the view-model will contain the value of the selected item, so you should be able to access the property directly.

prepareQueryStringFromSelectedCategories(categoryParams) {
    return categoryParams.slug;
}

Leave a Reply