loop enumerate objects in radioButton

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

                  <div
                    v-for="index in data"
                    :key="index.id"
                  >
                    <radio-button
                      v-model="date"
                      :value="index"
                      :label="index"
                    />
                  </div>

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

Answer

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" />
</div>

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" />
  </div>
</template>

demo 2