0

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

0

1 respuesta 1

2

Tu componente no tiene una propiedad items sino TheItems, por lo que debieras corregir para que quede:

 data() {
      return {
        items:[]
      };
 }

Y supongo que ya lo estás haciendo pero como en tu pregunta no lo pones explícitamente, tienes que reasignar a esa propiedad el contenido que te devuelve axios

axios.get('http://localhost:3000/item').then((response) => {
    this.items=response; 
})

O bien al estilo old school

axios.get('http://localhost:3000/item').then(function(response){
    vm.items = response;
})

Nota: no tengo como probarlo ahora pero pienso que axios te devuelve la respuesta dentro de un atributo data de modo que debieras usar response.data en vez de sólo response. Vas a tener que probar tú misma.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.