0

Lo que quiero lograr es mandar un objeto(Estoy recorriendo con la directiva v-for) de mi componente a otro componente por medio de router-link. 1.- La vista donde recorro el objeto productos quiero enviar ese producto a una vista detalle.

 <template>
  <div class="container">
    <h1 class="text-center">Productos</h1>
    <div class="productos-container">
      <div
        class="card"
        style="width: 18rem"
        v-for="item in productos"
        :key="item"
      >
        <img
          src="https://via.placeholder.com/200x100/O https://placeholder.com/"
          class="card-img-top"
        />
        <div class="card-body">
          <h5 class="card-title">{{ item.titulo }}</h5>
          <p class="card-text">
            {{ item.description }}
          </p>
          <router-link :to="{name:'Producto', params:{producto: item} }" class="btn btn-success btn-sm">Ver detalle</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

2.- La vista donde quiero recibir mi objeto item.

 <div class="container">

<div class="productos-container">
  <div
    class="card"
    style="width: 18rem"
  >
    <img
      src="https://via.placeholder.com/200x100/O https://placeholder.com/"
      class="card-img-top"
    />
    <div class="card-body">
      <h5 class="card-title">asd</h5>
      <p class="card-text">
        lorem
      </p>
    </div>
  </div>
</div>
3.- Ruta del componente detalle aqui:

const routes = [
  { path: '/producto/:producto', name: 'Producto', props: true, component: () => import('../views/productos/Detalle.vue') }
]

2 respuestas 2

0

Bienvenido a StackOverflow.ES!

En tu caso, la respuestas es muy sencilla, debes añadir al componente donde deseas abrir un objeto la propiedad props, que te permite indicar en el componente B, lo que A va a mandarle, tanto el nombre como el tipo.

En tu caso, sería algo así:

  props: {
    producto: Object,
  },

Y con eso, ya tendrías acceso a tu objeto producto en el componente B.

1
  • Hola gracias por tu aportación, ya lo intente de la manera en la que me indicas sin embargo al recibir la variable 'producto' en mi componente detalle llega como [object object] sin ningún dato Commented el 28 ago. 2021 a las 4:42
0

Estás pasando el objeto en los parámetros, es decir, se guarda en this.$route.params.producto, lo que te falta es asignarlo a una variable y listo, desde ahí lo utilizas.

Ejemplo en el componente a visualizar:

mounted () {
    this.productoTraido = this.$route.params.producto;
}

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.