Home » vue » loop enumerate objects in radioButton

loop enumerate objects in radioButton

Posted by: admin November 26, 2021 Leave a comment


Hello i want to loop this object in checkbox value and index

 data: [
        key1: 'last 6 months'
        key2: 'last 30 days'

i want to create a radioButton like this

° last 6 months

° last 30 days

i’m do that in my code

                    v-for="index in data"

my results is

° key1

° key2

i wan’t to recover value in label not key because the key is send to api

Please help thank you


Iterate an object

When iterating an object with v-for, the object value is the first argument, then the object key. And since the object key is unique, you can use that as the key binding:

<div v-for="(value, key) in data" :key="key">

The label prop of <radio-button> should be bound to the object value, which is descriptive text; and the value prop could be bound to either the object value or object key, depending on what you want the v-model to reflect:

<radio-button v-model="date" :value="key" :label="value" />

The final result should be similiar to:

<div v-for="(value, key) in data" :key="key">
  <radio-button name="my-date" v-model="date" :value="key" :label="value" />

demo 1

Iterate an array of objects

Nest the solution above in another v-for. The outer v-for iterates the array, while the inner one iterates the the object:

<template v-for="item in data">
  <div v-for="(value, key) in item" :key="key">
    <radio-button name="my-date" v-model="date" :value="key" :label="value" />

demo 2