Search code examples
vue.jsvuetify.jsv-select

Vuetify v-select not showing options


I have a component that grabs the address from a user, and part of that is the state. I followed the documentation and cannot find anything different about my code compared to documentation. The problem is that when i click the button to show options, nothing is visible. If I type the name in, it selects as expected. All of the rest of the inputs work without issue, but they are v-text-fields. Apart from some of the validation stuff, there are no issues that I can identify.

<template>
  <v-card>
    <v-container>
      <!-- some other stuff -->
      <v-select
        :items="items"
        label="State"
        @input="_=>state=_"
      ></v-select>
    </v-container>
  </v-card>
</template>

<script>
export default {
  data: () => ({
    items: [
      '',   'AL', 'AK', 'AZ', 'AR',
      'CA', 'CO', 'CT', 'DE', 'DC',
      'FL', 'GA', 'HI', 'ID', 'IL',
      'IN', 'IA', 'KS', 'KY', 'LA',
      'ME', 'MD', 'MA', 'MI', 'MN',
      'MO', 'MS', 'MT', 'NE', 'NV',
      'NH', 'NH', 'NM', 'NY', 'NC',
      'ND', 'OH', 'OK', 'OR', 'PA',
      'RI', 'SC', 'SD', 'TN', 'TX',
      'UT', 'VT', 'VA', 'WA', 'WV',
      'WI', 'WY', 'AS', 'GU', 'MP',
      'PR', 'VI'
    ]
  })
}
</script>

Solution

  • You need to wrap up the template content with v-app:

    <template>
      <v-app>
        ...
      </v-app>
    </template>
    

    Better do this in the App.vue to apply on all the application components.