Не выводится list в vuetify js, как исправить?

Я взял вот этот листинг:

https://next.vuetifyjs.com/ru/components/lists

5d02a085c0f17031234875.png

Он выглядит так по идее:

5d02a3f997386576089373.png

Далее скопировал код шаблона:

<v-card
    max-width="500"
    class="mx-auto"
  >
    <v-toolbar
      color="indigo"
      dark
    >
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Inbox</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>search</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>more_vert</v-icon>
      </v-btn>
    </v-toolbar>
    <v-list>
      <v-list-item
        v-for="item in items"
        :key="item.title"
        @click=""
      >
        <v-list-item-icon>
          <v-icon v-if="item.icon" color="pink">star</v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title v-text="item.title"></v-list-item-title>
        </v-list-item-content>

        <v-list-item-avatar>
          <v-img :src="item.avatar"></v-img>
        </v-list-item-avatar>
      </v-list-item>
    </v-list>
  </v-card>


<script>
import { METHODS } from 'http';
  export default {
    data: () => ({
      drawer: null,
      drawerRight: null,
      right: false,
      left: false,
      

      // вставил этот кусок кода, этот кусок отличается немного от оригинала, вырезал return так с ним не работает
        items: [
          { icon: true, title: 'Jason Oner', avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg' },
          { title: 'Travis Howard', avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
          { title: 'Ali Connors', avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
          { title: 'Cindy Baker', avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
        ],

        // закончился код
      
    }),
    props: {
      source: String
    }
    
    
  }

</script>


Вставил в проект и стили разъехались:
5d02a47b4fa0c947287327.png

В консоли ошибка :

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in



Вопрос нужно ли регистрировать этот компонент ведь он стандартный? И как регистрировать?
  • Вопрос задан
  • 686 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
Я взял вот этот листинг:

https://next.vuetifyjs.com/ru/components/lists

В консоли ошибка :

[Vue warn]: Unknown custom element

Может, у вас vuetify версии 1.x, в то время как документацией пользуетесь от второй? - некоторые компоненты были переименованы.
Ответ написан
@gradk Автор вопроса
была ошибка версии
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы