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
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>
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>