Error while passing props with literal objects via v-bind="Object"

Question

In Vue it is described in the documentation that you want to pass all properties of an object via props it is possible to pass it as follows

# data do componente
post: {
  title: 'Título da post',
  content: '...'
}

# template

<blog-post v-bind="post"></blog-post>

I tested this approach but I get an error. Here’s my code:

const blogPost = {
    props: ['post'],
    template: '\
    <div>\
      <h1>{{ title }}</h1>\
      <p>{{ content }}</p>\
    </div>'
};

const app = new Vue({
  el: '#app',
  data: {
    post: {
      title: 'Minha jornada com Vue',
      content: '...'
    }
  },
  components: {
    'blog-post': blogPost
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <blog-post v-bind="post"></blog-post>
</div>

# Erro

title is not defined

Answer 1

By giving the v-bind you should point to prop you want to assign, and in the interpolation use the prop as an object...

const blogPost = {
    props: ['post'],
    template: '\
    <div>\
      <h1>{{ post.title }}</h1>\
      <p>{{ post.content }}</p>\
    </div>'
};

const app = new Vue({
  el: '#app',
  data: {
    post: {
      title: 'Minha jornada com Vue',
      content: '...'
    }
  },
  components: {
    'blog-post': blogPost
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <blog-post v-bind:post="post"></blog-post>
</div>