Почему я получаю ошибки при импорте компонентов таким образом? я что-то упускаю в коде?

Я создал vue с проектом функции vuetify и получаю эти ошибки. первое прошлое ошибок

Второй блок ошибок

Так я структурирую проект.

Структура проекта

Это код для VideoPrueba.vue

<template>
<div>
     <v-row>
                  <v-col
                    class = "d-flex justify-center"
                    cols = "6"
                  >
                    <div class = "positionButton">
                      <v-btn
                        class = "accent-3 blue"
                        dark
                      >
                        Add voice
                      </v-btn>
                    </div>
                  </v-col>
                  <v-col
                    class = "d-flex justify-center"
                    cols = "6"
                  >
                    <VideoPrueba
                      v-for = "(step, key) in steps"
                      :key = "key"
                      v-model = "step.selected"
                      :items = "step.options"
                    />
                  </v-col>
                </v-row>
                </div>
</template>

<script>
import VideoPrueba from './VideoPrueba'
  export default {
    name: 'HelloWorld',
    components:'VideoPrueba',
   
    data: () => ({
       steps: [
      {
        title: 'Videos',
        options: ['Video 1', 'Video 2', 'Video 3', 'Video 4'],
        selected: []
      }
    ],
   } )
  }
</script>

Это код для HelloWorld.vue

<template>
<div>
     <v-row>
                  <v-col
                    class = "d-flex justify-center"
                    cols = "6"
                  >
                    <div class = "positionButton">
                      <v-btn
                        class = "accent-3 blue"
                        dark
                      >
                        Add voice
                      </v-btn>
                    </div>
                  </v-col>
                  <v-col
                    class = "d-flex justify-center"
                    cols = "6"
                  >
                    <VideoPrueba
                      v-for = "(step, key) in steps"
                      :key = "key"
                      v-model = "step.selected"
                      :items = "step.options"
                    />
                  </v-col>
                </v-row>
                </div>
</template>

<script>
import VideoPrueba from './VideoPrueba'
  export default {
    name: 'HelloWorld',
    components:'VideoPrueba',
   
    data: () => ({
       steps: [
      {
        title: 'Videos',
        options: ['Video 1', 'Video 2', 'Video 3', 'Video 4'],
        selected: []
      }
    ],
   } )
  }
</script>

Это для App.vue

<template>
  <v-app>
    <v-app-bar
      app
      color = "primary"
      dark
    >
      <div class = "d-flex align-center">
        <v-img
          alt = "Vuetify Logo"
          class = "shrink mr-2"
          contain
          src = "https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition = "scale-transition"
          width = "40"
        />

        <v-img
          alt = "Vuetify Name"
          class = "shrink mt-1 hidden-sm-and-down"
          contain
          min-width = "100"
          src = "https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width = "100"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href = "https://github.com/vuetifyjs/vuetify/releases/latest"
        target = "_blank"
        text
      >
        <span class = "mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),
};
</script>

И это то, что у меня есть для main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

Есть идеи, спасибо?

components:'VideoPrueba', и т. д. Должны быть components: {VideoPrueba},
Lawrence Cherone 03.04.2021 17:55

Большое спасибо, это сработало.

Gabriel Quezada Castro 06.04.2021 17:47
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
2
19
0

Другие вопросы по теме