[Vuejs]-Why is the Vuetify autocomplete not showing the data in the component?

1👍

For Vuetify to work, you need to wrap all of your content into a <v-app> component. The error tells you that you’re missing this component.

    <template>
      <div class="app">
        <v-app>
          <v-card width="500">
            <v-card-title class="pb-0">
              <h1>Sign Up</h1>
            </v-card-title>
            <v-card-text>
              <v-form>
                <v-text-field
                  required
                  label="Email"
                  type="email"
                  prepend-icon="mdi-email"
                />
                <v-text-field
                  required
                  :type="showPassword ? 'text' : 'password'"
                  label="Password"
                  prepend-icon="mdi-lock"
                  :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                  @click:append="showPassword = !showPassword"
                />
                <v-text-field
                  required
                  label="First Name"
                  prepend-icon="mdi-account-circle"
                />
                <v-text-field
                  required
                  label="Last Name"
                  prepend-icon="mdi-account-circle"
                />
                <v-text-field
                  required
                  label="Preferred Username"
                  prepend-icon="mdi-account-circle"
                  placeholder="This name will be seen by others and identify you on the site"
                />
                <v-autocomplete
                  label="Which school do you attend?"
                  :items="schools"
                ></v-autocomplete>
              </v-form>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-btn color="info">Sign Up</v-btn>
            </v-card-actions>
          </v-card>
        </v-app>
      </div>
    </template>
👤Jesper

0👍

The functionality of the component will not work properly unless the form is contained within a <v-app></v-app> wrapper

👤jon

Leave a comment