Intento pasar un objeto a un componente secundario. El objeto es de una solicitud de recuperación a Strapi. Estoy usando Nuxt Bridge y Vue 2.6.14
La búsqueda en el padre
<script> export default { async fetch() { this.featured = await fetch( 'http://localhost:1337/api/getFeature', ).then((res) => res.json()); this.feed = await fetch( 'http://localhost:1337/api/getFeed' ).then((res) => res.json()); }, data(){ return { featured: {}, feed: [] } }, } </script>El componente
<Feature v-bind="featured"/>En el componente hijo
<script> export default { props: { featured:Object, } } </script>El problema es que el objeto termina como atributos en la primera etiqueta div del componente secundario.
<div title="Apple pie apple pie tootsie roll liquorice tiramisu topping" lede="Gummies lemon drops tootsie roll cake jelly beans candy cotton candy. Apple pie chocolate bar bear claw icing candy chocolate bar jelly pie" url="https://ik.imagekit.io/nnydigital/strapi/bryam_blanco_n_XKW_Ln8y9q_E_unsplash_44c4203534_M_Kx22_N6x_YD_abf84d3bbd_Mo5JvpCD3.jpg" created="Wed Jun 29 2022 10:38:07 GMT-0400 (Eastern Daylight Time)" updated="Wed Jun 29 2022 10:38:08 GMT-0400 (Eastern Daylight Time)" published="Wed Jun 29 2022 10:38:08 GMT-0400 (Eastern Daylight Time)"> Si usa <Feature :title="featured.title" />
Funciona como se esperaba. ¿Qué me estoy perdiendo/haciendo mal?
Sí, v-bind distribuirá las propiedades del objeto.
Por lo tanto, los props del componente secundario no contendrán el objeto featured , pero contendrán todas sus propiedades y lo vincularán al elemento principal del componente, y los props serán así.
<script> export default { props: { title: string, lede: string, url: string, created: string, updated: string, published: string, } } </script> Si desea enviar el objeto featured en sí, entonces debe ir con
<Feature :featured="featured"/>Entonces puedes obtenerlo de accesorios como ese
<script> export default { props: { featured:Object, } } </script>De acuerdo con su componente <Featured/> , solo hay un accesorio featured .
para poder pasar el title y otros, debe agregarlos en la sección de accesorios del componente como este
<script> export default { props: { published: string, title: string, lede: string, url: string, updated: string, created: string, } } </script> de lo contrario, simplemente pasará todo el objeto a la vez y lo usará así this.props.title