<v-otp-input> - 您是否正确注册了组件？

Question

我正在做一个 nuxt 项目，我使用 vuetify 作为 UI 框架。我尝试使用 v-otp-input 但我在我的控制台中收到此错误。

所有 vuetify 元素都工作正常，但这个不行，我该怎么办？

这是我的代码

 <v-otp-input
      :error-messages="codeErrorMsg"
      v-model="password"
      type="password"
      length="5"
      dark
    ></v-otp-input>

ps：我正在寻找这样的东西：

如有任何帮助，我们将不胜感激

Answer 1

您可以使用 Vuetify <v-opt-input> 组件并根据您的需要稍微覆盖其 css。

<v-otp-input
  length="6"
  plain
  type="number"
></v-otp-input>

要编辑组件的 css 样式，这不是一件容易的事，因为您必须在浏览器调试器上检查应用到组件的类是什么以及它包含哪些元素。但这是可行的:)

Answer 2

假设您使用的是最新的 Vuetify 版本 (2.6.6)，您必须将页面或布局包装到一个组件中：https://vuetifyjs.com/en/api/v-app/

<template>
  <v-app>
      <v-otp-input
        :error-messages="codeErrorMsg"
        v-model="password"
        type="password"
        length="5"
        dark
      ></v-otp-input>
  </v-app>
</template>

Answer 3

那是因为 vuetify 版本（vuetify 版本必须是 2.6.0 或更高版本）

用于更新 vuetify:

1.Run npm info vuetify 查找他们拥有的版本列表。

npm info vuetify

2.install你想要的具体版本用下面的例如：

npm install --save vuetify@2.6.6

<v-otp-input> - 您是否正确注册了组件？

<v-otp-input> - did you register the component correctly?

vue.js

nuxt.js

vuetify.js