1

Mi gran duda es respecto al pasaje de props. Cuando yo llamo a un componente dentro de otro, le puedo pasar props como si se trataran de atributos HTML. Pero si el componente al que le voy a pasar dicha prop es un componente de vista (es decir, no lo llamo como <MiComponente :prop="miProp" />, sino haciendo uso del router) no se como se pasaría una prop en este caso. Esto es lo que intenté y no funciona:

Tengo una ruta que usa el componente Character.vue

  {
    path: '/character/:character',
    name: 'Character',
    props: true,
    component: () => import(/* webpackChunkName: "character" */ '../views/Character.vue')
  }

Y en otro componente Card.vue, (en el cual tengo un objeto en prop.character) tengo una función que hace lo siguiente:

  router.push({
    name: "Character",
    params: {
      character: { ...props.character },
    },
  });

Mi intención es que al cargarse la ruta de nombre Character, tenga en sus props el valor que viene del componente Card.vue (props.character)

Para ello, en el componente de vista Character.vue tengo

 props: {
    character: {
      type: Object,
      required: true,
    },
  },

Al ejecutar la función de Card.vue, soy redirigido a una ruta http://localhost:8080/#/character/[object%20Object], es decir, estoy pasando un string en lugar de un objeto. Alguien me podría decir cual es el camino correcto para recibir el objeto en la vista Character.vue? Muchas gracias

7
  • Che, yo tengo hecho algo similar, pero el objeto lo obtengo en Data a partir de la info dentro de router. Ejemplo: yourParam: this.$route.params.yourParam Commented el 9 abr. 2022 a las 21:13
  • @FrancoBerardi No te seguí bien la respuesta, entiendo que en lugar de hacer uso de la composition API + useRoute, vas por la funcion data a obtener this.$route.params.etc. Yo a eso logro recibirlo, el problema es que no estoy recibiendo el objeto que mando cuando llamo a router.push, sino que estoy recibiendo un string "[Object Object]". No se si tengo un error haciendo router.push, en el router, o en ambos, pero el objeto que intento enviar, no lo recibo en mi componente de vista (Terminé resolviendo con Vuex, pero me surgió esta duda y por eso realicé la pregunta)
    – Agustin G.
    Commented el 11 abr. 2022 a las 14:53
  • 1
    mmm creo que tu problema es que especifiques en la ruta path: '/character/:character', por eso intenta mandarlo por la url y te lo pasa a string. Tal vez puedes pasarle solo el id? /character/:characterId y el resto del obejto como lo estas haciendo. Intento hacerme un hueco en la semana para mandarte un ejemplo si no te anda.. Commented el 11 abr. 2022 a las 16:46
  • codesandbox.io/s/vue-router-playground-forked-x2yfhn?file=/src/… te dejo un ejemplo cortito. Fijate la page WithProps.vue .. ahi juega con la prop y el data para que puedas usar la prop cuando necesites y la route caso contrario. El ejemplo AsString funciona de todas formas pero le hace el stringify en la url (horrible) asi que me quedo con la opcion 1 (asObject). De todas formas al pasar el objeto asi y redirigir, si el usuario recarga la pantalla (o se guarda la URL) no va a poder usarla. Estaría bueno controlar si la data no está y cargarla Commented el 12 abr. 2022 a las 12:04
  • 1
    sip! por eso no lo puse como respuesta. Espero lo puedas adapatar. Me cambié a React y no usé nunca vue3 :) Commented el 12 abr. 2022 a las 12:27

1 respuesta 1

1

Si quieres enviar un parametro por URL no puedes enviar un objetos a menos que lo conviertas en un string en base64.

Si por el contrario no necesita enviarlo por url solo haga esto:

 router.push({
    name: "Character",
    params: props.character   
  });

Router

 {
    path: '/character' //quitar /:character,
    name: 'Character',
    props: true,
    component: () => import(/* webpackChunkName: "character" */ '../views/Character.vue')
  }

Sin embargo esto solo le servira si objeto props.character no contiene ningun objeto dentro ya que si intenta enviar:

  {
    id: '3', 
    admin: true, 
    info:{ name: 'hola' }
  }

Recibira en la vista

 {
    id: '3', 
    admin: true, 
    info:"[Object Object]"

  }
2
  • Buenas! Lo de que no serializa el objeto interno, no es así. Funciona OK tanto para el primer nivel como para el N (lo podes ver en el link que está en los comments). Estoy de acuerdo con lo de base64, pero habría que tener cuidado de cuando es una buena decisión. Commented el 15 abr. 2022 a las 22:48
  • En el ejemplo de de los comentarios se esta utilizando Vue 2. Parece que algo cambio en Vue 3. Commented el 16 abr. 2022 a las 17:05

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.