v-text-field 和 v-switch .. with in v-form in vuetify 不显示

Question

当我将 vuetify(2.4.3) 与 vuejs(2.6.11) 和 vuetify-loader(1.7.0) 一起使用时。 一切都很好，但是当我使用表单创建页面时，无法显示 v-text-field、v-select 组件。 这是我的代码（没有任何错误）：

<template>
  <v-form
    ref="form"
    v-model="valid"
    lazy-validation
  >
    <v-text-field
      v-model="name"
      :counter="10"
      :rules="nameRules"
      label="Name"
      required
    ></v-text-field>

    <v-text-field
      v-model="email"
      :rules="emailRules"
      label="E-mail"
      required
    ></v-text-field>

    <v-select
      v-model="select"
      :items="items"
      :rules="[v => !!v || 'Item is required']"
      label="Item"
      required
    ></v-select>

    <v-checkbox
      v-model="checkbox"
      :rules="[v => !!v || 'You must agree to continue!']"
      label="Do you agree?"
      required
    ></v-checkbox>

    <v-btn
      :disabled="!valid"
      color="success"
      class="mr-4"
      @click="validate"
    >
      Validate
    </v-btn>

    <v-btn
      color="error"
      class="mr-4"
      @click="reset"
    >
      Reset Form
    </v-btn>

    <v-btn
      color="warning"
      @click="resetValidation"
    >
      Reset Validation
    </v-btn>
  </v-form>
</template>

<script>
  export default {
    data: () => ({
      valid: true,
      name: '',
      nameRules: [
        v => !!v || 'Name is required',
        v => (v && v.length <= 10) || 'Name must be less than 10 characters',
      ],
      email: '',
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
      ],
      select: null,
      items: [
        'Item 1',
        'Item 2',
        'Item 3',
        'Item 4',
      ],
      checkbox: false,
    }),

    methods: {
      validate () {
        this.$refs.form.validate()
      },
      reset () {
        this.$refs.form.reset()
      },
      resetValidation () {
        this.$refs.form.resetValidation()
      },
    },
  }
</script>

这是页面的来源： v-text-field v-select ... 只显示一个像这样的“div”标签：

<form data-v-b5dd6ec2="" novalidate="novalidate" class="v-form">
  <div><!----></div>
  <div><!----></div>
  <div><!----></div>
  <div><!----></div>
  <button type="button" class="mr-4 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default success">
    <span class="v-btn__content"> Validate </span>
  </button>
  <button type="button" class="mr-4 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default error">
    <span class="v-btn__content"> Reset Form </span>
  </button>
  <button type="button" class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default warning">
    <span class="v-btn__content"> Reset Validation </span>
  </button>
</form>

this is the source of the page

如何正确使用 v-form 和 v-text-field v-select ...？ 其他组件在我的项目中工作正常，除了表单元素，有人可以帮助我吗？

Answer 1

当我从我的 vuejs 项目中重新安装 vuetify 时，问题就解决了