How to debug select menu not selected? - vue.js

Question

I have this select menu:
<v-select
dense
outlined
item-text="name"
item-value="id"
:items="frequencies"
v-model="frequency"
label="Frequency"
></v-select>
& I kept seeing this:
If I print it out it seems to contain correct value:
{{ frequency }} {{ frequencies }}
Hourly
[
{
"id": 1,
"name": "Hourly"
},
{
"id": 2,
"name": "Daily"
},
{
"id": 3,
"name": "Weekly"
},
{
"id": 4,
"name": "Monthly"
},
{
"id": 5,
"name": "Perpetual"
}
]
Why my select didn’t select Hourly as selected value?

Answer 1

Here's a live, working demo using your example.
Or, for a shortened version here:
// Hide Vue dev warnings, just for the demo
Vue.config.devtools = false;
Vue.config.productionTip = false;
// Demo Vue app, using vuetify
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
frequency: null, // ID of currently selected frequenct
frequencies: [ // List of values to display in the dropdown
{ id: 1, name: "Hourly" },
{ id: 2, name: "Daily" },
{ id: 3, name: "Weekly" },
{ id: 4, name: "Monthly" },
{ id: 5, name: "Perpetual" },
{ id: "XX", name: "Broken" },
],
}),
})
p.demo { font-size: 1.5rem; text-align: center; background: yellow; }
p.demo.init { background: aqua; }
p.demo.broke { background: hotpink; }
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.5/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.5/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<!-- v-select, from your question -->
<v-select
dense
outlined
item-text="name"
item-value="id"
:items="frequencies"
v-model="frequency"
label="Frequency"
></v-select>
Selected Frequency : {{ frequency }}
<!-- Display what's selected, just for the demo -->
<p class="demo" v-if="frequency && frequencies[frequency - 1]">
Frequency: {{ frequency }} ({{ frequencies[frequency - 1].name }})
</p>
<p class="demo broke" v-else-if="frequency">
Invalid Frequency Selected ({{ frequency }})
</p>
<p class="demo init" v-else>No value selected yet</p>
</v-container>
</v-app>
</div>

Answer 2

I am not sure what issue you are facing but label is not showing on select any option from the <v-select>. I created a sample code snippet for the reference, Can you please have a look and let me know if any further assistance required.
Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
frequency: null,
frequencies: [
{
"id": 1,
"name": "Hourly"
},
{
"id": 2,
"name": "Daily"
},
{
"id": 3,
"name": "Weekly"
},
{
"id": 4,
"name": "Monthly"
},
{
"id": 5,
"name": "Perpetual"
}
]
}),
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.5/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.5/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-select
:items="frequencies"
item-text="name"
item-value="id"
label="Frequency"
v-model="frequency"
outlined
></v-select>
Selected Frequency : {{ frequency }}
</v-container>
</v-app>
</div>