Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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…

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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;
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading