[Vuejs]-Vue Props passed to SFC end up as attributes in DIV element

by

1👍

✅

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>

-1👍

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

Leave a comment