Use v-bind as a kind of a “prop destructuring” instead of passing multiple object properties into a component as props.
<template>
<post
:id="post.id"
:title="post.title"
:author="post.author"
/>
<!-- This (↑) is the same as this (↓) -->
<post v-bind="post" />
</template>
<script>
// <post> component definition
export default {
props: {
id: Number,
title: String,
author: Object
}
}
</script>
Leave a reply