Estoy haciendo una aplicación con Node, Express, Vue y Mongoo, pasa que quiero mostrar los items de la base de datos pero no me los muestra. Le estoy dando un console.log y si están pasando la información, llevo mucho en esto y no encuentro el problema.
Este es mi displayitem
<template>
<div>
<div class="row p-4">
<div class="col-md-12">
<h1 class="d-inline">Items</h1>
<router-link :to="{ name: 'CreateItem' }" class="btn btn-primary float-right mt-2">
Create Item
</router-link>
</div>
</div><br />
<table class="table table-hover table-bordered">
<thead>
<tr>
<td>ID</td>
<td>Item Name</td>
<td>Item Category</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td>{{ item._id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.category }}</td>
<td>
<router-link :to="{ name: 'DetailsItem', params: {id: item._id} }" class="btn btn-primary">
View
</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default{
name:'app',
data(){
return {
TheItems:[]
};
},
created: function (){
var vm=this;
axios.get('http://localhost:3000/item').then(function(response){
console.log(response);
})
}
}
</script>
y este es mi detalle del item
<template>
<div>
<div class="row p-4">
<div class="col-md-12">
<h1 class="d-inline">Details Items</h1>
</div>
</div><br />
<table class="table table-hover table-bordered">
<thead>
<tr>
<td>Item Name</td>
<td>Item Price</td>
<td>Category</td>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td>{{ item.name }}</td>
<td>{{ category.title }}</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default{
name: 'item',
data(){
return {
item:{}
}
},
created(){
var vm= this;
let id = this.$route.params.id
axios.get(`http://localhost:3000/item/${id}`).then(function(response){
vm.item=response.data;
console.log(vm.item);
})
}
}
</script>
Y mi App.vue
<template>
<div>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<router-link :to="{ name: 'DisplayItem' }" class="navbar-brand">
<img src="assets/images/logo.png"/>
</router-link>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<router-link :to="{ name: 'CreateItem' }" class="nav-link">
Create
</router-link>
</li>
</ul>
</div>
</nav>
<div class="container">
<div>
<transition name="fade">
<router-view v-bind:students="TheItems"></router-view>
</transition>
</div>
</div>
</div>
</template>
<style>
body{
background-color: purple;
}
.fade-enter-active .fade-leave-active {
transition: opacity .5s;
}
.fade-enter .fade-leave-active {
transition: 0;
}
</style>
<script>
export default{
name:'app',
data(){
return {
TheItems:[]
};
},
created: function (){
var vm=this;
axios.get('http://localhost:3000/item').then(function(response){
console.log(response);
})
}
}
</script>
Estoy muy perdida y no funciona, llevo mucho tiempo en esto y no logro dar con el chiste. Agradecería la ayuda