Vue Props passed to SFC end up as attributes in DIV element-CodePudding

I trying to pass an object to a child component. The object is from a fetch request to Strapi. I'm using Nuxt Bridge and Vue 2.6.14

The fetch in the parent

<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>

The component

<Feature v-bind="featured"/>

In the child component

<script>
export default {
    props: {
        featured:Object,
    }
}
</script>

The problem is that the object ends up as attributes on the first div tag in the child component.

<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)">

If use <Feature :title="featured.title" />

It works as expected. What am I missing/doing wrong?

CodePudding user response：

Yes, v-bind will spread the object properties.

So the child component props will not contain the featured object, but it will contain all its properties and it will bind it to the main element of the component, and the props will be like that.

<script>
export default {
    props: {
        title: string,
        lede: string,
        url: string,
        created: string,
        updated: string,
        published: string,
    }
}
</script>

If you want to send featured object itself, then you need to go with

<Feature :featured="featured"/>

Then you can get it from props like that

<script>
export default {
    props: {
        featured:Object,
    }
}
</script>

CodePudding user response：

According to your <Featured/> component there is only a featured prop.

to be able to pass title and others you need to add them in the props section of the component like this

<script>
export default {
    props: {
        published: string,
        title: string,
        lede: string,
        url: string,
        updated: string,
        created: string,
    }
}
</script>

else you will just pass the whole object at once and use it like this this.props.title