vuetify: Why are my radio buttons without value? - vue.js

Question

I don't know why, but my radio buttons are without value.
I have the following json (my json), and I'm rendering the items as v-radio buttons inside a v-radio-group, my radio button label is item.description and value is item.id, but i can't get the value by v-model="picked", why this is happening?
when I inspect the page, this is the description of my radio buttons, it is not returning a value
<input aria-checked="false" id="input-90" role="radio" type="radio" name="radio-80" value="">
My json
CATEGORIES = [{
'title': 'vegetables:',
'items': [
{
'id': '19',
'description': 'asparagus',
}
]
},
{
'title': 'Fruits:',
'items': [
{
'id':'21',
'description': 'oranges',
},
{
'id': '22',
'description': 'Apples',
},
{
'id':'23',
'description': 'pears',
},
{
'id': '24',
'description': 'limes',
},
{
'id': '25',
'description': 'avocados',
},
]
},]
My template
<template>
<v-container>
<h3>Select the issue category:</h3>
<v-form >
<v-radio-group v-model="radios" :mandatory="false" >
<v-list dense v-for="category in categories" :key="category">
<v-list-item-title>{{category.title}}</v-list-item-title>
<br>
<v-radio v-for="item in category.items"
:key="item"
:label="item.description"
:value="item.id"
:name="items"
v-model="picked"></v-radio>
</v-list>
</v-radio-group>
</v-form>
</v-container>
</template>

Answer 1

The biggest problem is you're nesting two v-models. If you set a v-model on the <v-radio-group> you only set value on the <v-radio>, not v-model and it will select that value in the radio group model. If you want multiple values, you should either use checkboxes (which is the same as radios but the model holds the array of all checked items, not only one) or perhaps multiple radio groups, if that's the required app logic.
Another problem is you're not key-ing correctly. You should only use unique primitives as your keys, not objects. In your case, category.title and item.id make good key candidates, provided they are unique.
Also, you don't have an items defined.
Last, but not least, you seem to be using radios and picked in your template without defining them (at least in what you're showing here).
If you look in your console, Vue informs you about all of the above errors. The console is your friend. Here's your example, working. But I'm not sure if it has the desired logic of your app:
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
radios: [],
categories: [{
'title': 'vegetables:',
'items': [{
'id': '19',
'description': 'asparagus',
}]
},
{
'title': 'Fruits:',
'items': [{
'id': '21',
'description': 'oranges',
},
{
'id': '22',
'description': 'Apples',
},
{
'id': '23',
'description': 'pears',
},
{
'id': '24',
'description': 'limes',
},
{
'id': '25',
'description': 'avocados',
},
]
}
]
})
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-container>
<h3>Select the issue category:</h3>
<v-form>
<v-radio-group v-model="radios" :mandatory="false">
<v-list dense v-for="category in categories" :key="category.title">
<v-list-item-title>{{category.title}}</v-list-item-title>
<v-radio v-for="item in category.items"
:key="item.id"
:label="item.description"
:value="item.id"
:name="item.description"></v-radio>
</v-list>
</v-radio-group>
</v-form>
</v-container>
</div>