Sou iniciante no Vue.js e estou tentando criar um aplicativo de busca. Estou usando a biblioteca vuetify e estou tendo o seguinte erro:
[Vue warn]: Unknown custom element: v-col - did you register the component correctly? For recursive components, make sure to provide the "name" option.
O meu código é o seguinte:
SCRIPT:
import axios from 'axios';
export default {
data() {
return {
users:[],
filteredUsers:[],
searchName: '',
birthMonth:'',
birthMonthChoice:[
{num:'01', month:'Janeiro'},
{num:'02', month:'Fevereiro'},
{num:'03', month:'Março'},
{num:'04', month:'Abril'},
{num:'05', month:'Maio'},
{num:'06', month:'Junho'},
{num:'07', month:'Julho'},
{num:'08', month:'Agosto'},
{num:'09', month:'Setembro'},
{num:'10', month:'Outubro'},
{num:'11', month:'Novembro'},
{num:'12', month:'Dezembro'},
],
departament:'',
departaments:[
'RH',
'T.I',
'Telemarketing'
],
}
},
mounted() {
axios.get('users')
.then(response => {
this.users = response.data;
this.filteredUsers = response.data;
})
.catch(error => console.log(error))
},
computed: {
searchUsers() {
let users = this.users;
let searchName = this.searchName.trim().toLowerCase();
users = users.filter(function(item){
if(item.name.toLowerCase().indexOf(searchName) !== -1){
return item;
}
})
return users;
},
},
TEMPLATE:
<v-flex d-flex lg12 sm12 xs12 >
<v-col class="d-flex" cols="12" sm="6">
<v-select v-model="departament" :items="departaments" label="Departamento" :clearable="true" solo></v-select>
</v-col>
<v-col class="d-flex" cols="12" sm="6">
<v-select v-model="birthMonth" :items="birthMonthChoice" @change="getBirthMonth" item-text="month" item-value="num" label="Mês do Aniversario" :clearable="true" solo return-object>
</v-select>
</v-col>
</v-flex>
<v-card class="mx-auto" max-width="250" v-for="user in searchUsers" :key="user.id" outlined>
<v-img class="white--text align-end" height="100px" width="250px" src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"></v-img>
<v-card-title class="pb-0">{{user.name}}</v-card-title>
<v-card-text class="text--primary">
<div>E-mail: {{user.email}}</div>
<div>Data de Aniversário: {{user.birthdate}}</div>
</v-card-text>
</v-card>
Main.js:
import Vue from "vue";
import App from "./App";
import router from "./router";
import store from "./store/index";
import ApiService from "./api/api.service";
import "vuetify/dist/vuetify.min.css";
import "font-awesome/css/font-awesome.css";
import Vuetify from "vuetify";
import Vuex from "vuex";
setupComponents(Vue);
Vue.use(Vuetify);
Vue.use(Vuex);
ApiService.init();
import moment from "moment";
Vue.prototype.moment = moment;
/* eslint-disable no-new */
new Vue({
el: "#app",
router,
store,
components: { App },
template: "<App/>",
data: {
}
});
App.Vue
<template>
<div @mousedown="wasClicked()">
<template v-if="!$route.meta.allowAnonymous">
<v-app id="inspire">
<div class="app-container">
<toolbar @toggleNavigationBar="drawer = !drawer" />
<navigation :toggle="drawer" />
<v-content>
<breadcrumbs />
<router-view />
<page-footer />
</v-content>
</div>
</v-app>
</template>
<template v-else>
<transition>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</template>
<loader></loader>
</div>
</template>
<script>
import moment from "moment";
import Loader from "./components/Loader";
export default {
name: "App",
components: { Loader },
data() {
return {
drawer: true,
loader: true
};
},
Alguma idéia sobre o que esteja causando esse erro?