为什么 Vuetify 自动完成不显示组件中的数据？答案

【问题标题】：Why is the Vuetify autocomplete not showing the data in the component?为什么 Vuetify 自动完成不显示组件中的数据？
【发布时间】：2020-04-11 00:23:33
【问题描述】：

我正在使用 Vue.js 和 Vuetify 在 Vue 组件内创建一个表单，但是我想在自动完成框中显示的学校列表丢失了。我已将它们作为数组包含在组件的数据函数中，但它们没有显示出来，并且在控制台中引发了以下错误。

[Vuetify] 无法定位目标 [data-app]

<template>
 <div class="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>
</div>

 export default {
   name: "signup",
   data: function() {
     return {
       showPassword: false,
       schools: [
       "Ipswich High School",
       "Northgate High School",
       "Kesgrave",
       "Ipswich Academy"
       ]
      };
     }
   };
  </script>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

除非表单包含在 v-app /v-app 包装器中，否则组件的功能将无法正常工作

【讨论】：

【解决方案2】：

要使 Vuetify 正常工作，您需要将所有内容包装到 <v-app> 组件中。该错误告诉您缺少此组件。

<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>

【讨论】：