1

No Vue é descrito na documentação que se deseja passar todas as propriedades de um objeto via props é possível passar o mesmo da seguinte forma

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

# template

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

Testei essa abordagem mas recebo um erro. Eis meu código:

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
0

1 Resposta 1

2

Ao dar o v-bind você deve apontar a prop que deseja atribuir, e na interpolação usar a prop como objeto...

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .