Unknown Custom Element: - Did You Register The Component Correctly?
I copied code from Vuetify Data Iterator Filter function
I tin use other Vuetify components like v-btn, 5-bill of fare, v-data-tabular array, 5-data-iterator, etc.
Only <v-list-item> and <v-list-item-title> throw errors.
I take no idea what is going on.
Fault messages:
[Vue warn]: Unknown custom element:
<v-listing-item>- did y'all register the component correctly? For recursive components, make sure to provide the "proper name" option[Vue warn]: Unknown custom element:
<5-list-item-title>- did you register the component correctly? For recursive components, make sure to provide the "name" option.
HTML:
<template> <div class="container"> <five-container fluid filigree-list-md style="padding: 0"> <5-information-iterator :items="items" :items-per-page.sync="itemsPerPage" :folio="folio" :search="search" :sort-by="sortBy.toLowerCase()" :sort-desc="sortDesc" hide-default-footer > <template v-slot:header> <v-toolbar dark colour="blueish darken-3" class="mb-1"> <5-text-field five-model="search" clearable flat solo-inverted hide-details prepend-inner-icon="search" label="Search" ></5-text-field> <template 5-if="$vuetify.breakpoint.mdAndUp"> <v-spacer></five-spacer> <v-select v-model="sortBy" flat solo-inverted hide-details :items="keys" prepend-inner-icon="search" label="Sort by" ></v-select> <v-spacer></v-spacer> <v-btn-toggle 5-model="sortDesc" mandatory> <v-btn large depressed color="blueish" :value="faux"> <5-icon>arrow_upward</v-icon> </v-btn> <v-btn large depressed color="blue" :value="true"> <five-icon>arrow_downward</v-icon> </v-btn> </v-btn-toggle> </template> </five-toolbar> </template> <template v-slot:default="props"> <5-layout wrap> <5-flex v-for="item in props.items" :key="item.name" xs12 sm6 md4 lg3> <5-card> <v-card-title class="subheading font-weight-bold">{{ detail.name }}</v-card-championship> <v-divider></v-divider> <v-list dense> <v-listing-item v-for="(fundamental, alphabetize) in filteredKeys" :key="index" :color="sortBy === key ? `blue lighten-4` : `white`" > <v-listing-item-content>{{ key }}:</v-listing-item-content> <v-listing-detail-content class="align-end">{{ item[fundamental.toLowerCase()] }}</v-list-item-content> </five-list-detail> </v-list> </v-card> </v-flex> </v-layout> </template> <template v-slot:footer> <v-layout mt-two wrap align-middle justify-centre> <span class="gray--text">Items per page</bridge> <v-menu offset-y> <template v-slot:activator="{ on }"> <v-btn night text colour="primary" class="ml-2" v-on="on"> {{ itemsPerPage }} <five-icon>keyboard_arrow_down</v-icon> </five-btn> </template> <v-listing> <5-listing-item v-for="(number, index) in itemsPerPageArray" :cardinal="index" @click="updateItemsPerPage(number)" > <v-listing-detail-championship>{{ number }}</v-listing-item-championship> </v-list-detail> </v-list> </v-menu> <v-spacer></v-spacer> <span class="mr-4 gray--text">Page {{ page }} of {{ numberOfPages }}</span> <five-btn fab dark color="blue darken-3" grade="mr-1" @click="formerPage"> <v-icon>keyboard_arrow_left</5-icon> </v-btn> <v-btn fab dark color="blueish darken-three" class="ml-ane" @click="nextPage"> <v-icon>keyboard_arrow_right</v-icon> </v-btn> </v-layout> </template> </v-data-iterator> </v-container> </div> </template> JS:
export default { data() { render { itemsPerPageArray: [4, eight, 12], search: "", filter: {}, sortDesc: fake, folio: 1, itemsPerPage: 4, sortBy: "name", keys: [ "Proper name", "Calories", "Fat", "Carbs", "Protein", "Sodium", "Calcium", "Fe" ], items: [ { proper name: "Frozen Yogurt", calories: 159, fat: 6.0, carbs: 24, protein: 4.0, sodium: 87, calcium: "14%", atomic number 26: "1%" }, { name: "Ice cream sandwich", calories: 237, fat: 9.0, carbs: 37, protein: four.3, sodium: 129, calcium: "8%", iron: "1%" }, { name: "Eclair", calories: 262, fat: 16.0, carbs: 23, poly peptide: 6.0, sodium: 337, calcium: "6%", iron: "7%" }, { name: "Cupcake", calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium: "iii%", fe: "8%" }, { name: "Gingerbread", calories: 356, fat: 16.0, carbs: 49, protein: 3.9, sodium: 327, calcium: "vii%", fe: "xvi%" }, { name: "Jelly bean", calories: 375, fat: 0.0, carbs: 94, protein: 0.0, sodium: 50, calcium: "0%", iron: "0%" }, { name: "Lollipop", calories: 392, fatty: 0.2, carbs: 98, protein: 0, sodium: 38, calcium: "0%", iron: "ii%" }, { name: "Honeycomb", calories: 408, fat: 3.two, carbs: 87, protein: 6.5, sodium: 562, calcium: "0%", iron: "45%" }, { name: "Donut", calories: 452, fatty: 25.0, carbs: 51, protein: 4.9, sodium: 326, calcium: "2%", iron: "22%" }, { proper name: "KitKat", calories: 518, fat: 26.0, carbs: 65, protein: vii, sodium: 54, calcium: "12%", atomic number 26: "half dozen%" } ] // value: true }; }, computed: { numberOfPages() { return Math.ceil(this.items.length / this.itemsPerPage); }, filteredKeys() { return this.keys.filter(primal => cardinal !== `Name`); } }, methods: { nextPage() { if (this.page + 1 <= this.numberOfPages) this.page += 1; }, formerPage() { if (this.page - 1 >= 1) this.page -= 1; }, updateItemsPerPage(number) { this.itemsPerPage = number; } }, }; Output screenshot:
Every bit you can see, other components are working well...
I read the Vuetify Quick Starting time again and make sure I install Vuetify correctly.
Below is src\plugins\vuetify.js file
import Vue from 'vue' import Vuetify from 'vuetify/lib' import 'vuetify/src/stylus/app.styl' Vue.use(Vuetify, { iconfont: 'medico', }) and src\main.js
import Vue from "vue"; import firebase from './components/firebaseInit'; import App from "./App.vue"; import router from "./router"; import vuetify from './plugins/vuetify' // path to vuetify export Vue.config.productionTip = imitation; let app = ''; // initialize the Vue app but when we are sure Firebase is initialized firebase.auth().onAuthStateChanged(() => { if (!app) { app = new Vue({ vuetify, router, render: h => h(App) }).$mount("#app"); } }); I tried to import the components manually only still, the aforementioned errors occurred:
import { VListItem, VListItemTitle } from "vuetify/lib"; consign default { components: { '5-listing-particular': VListItem, 'v-list-item-title': VListItemTitle }, ... } I as well tried:
- Remove
.node_modulesfolder - Run
npm update - Run
npm install
Still the aforementioned errors. I also searched a lot of related posts but no luck.
Unknown Custom Element: - Did You Register The Component Correctly?,
Source: https://stackoverflow.com/questions/57428834/vue-js-vuetify-js-unknown-custom-element-v-list-item-v-list-item-title-d
Posted by: phamlinto1944.blogspot.com
0 Response to "Unknown Custom Element: - Did You Register The Component Correctly?"
Post a Comment