How to debug select menu not selected?-CodePudding

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 ?

CodePudding user response：

Here's a live, working demo using your example.

Or, for a shortened version here:

<template>
  <v-app id="app">
    <v-select
      dense
      outlined
      item-text="name"
      item-value="id"
      :items="frequencies"
      v-model="frequency"
      label="Frequency"
    ></v-select>
  </v-app>
</template>

<script>
export default {
  name: "app",
  data: () => ({
    frequencies: [],
    frequency: null,
  }),
  mounted() {
    // Set initial data for demo
    this.frequencies = [
      { id: 1, name: "Hourly" },
      { id: 2, name: "Daily" },
      { id: 3, name: "Weekly" },
      { id: 4, name: "Monthly" },
      { id: 5, name: "Perpetual" },
    ];
  },
};
</script>

CodePudding user response：

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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/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>