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

Question

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

Navigation

#1 by (1 votes)

1

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

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

# template

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

I tested this approach but got 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><divid="app">
  <blog-post v-bind="post"></blog-post>
</div>

# Erro

title is not defined

vue.js vue.js-2

asked by anonymous 28.11.2018 / 03:09

1 answer

Get DIV through a custom attribute [duplicate] How to reduce the execution time of a program in python?

score 1 · Answer 1

When giving v-bind you should point to prop you want to assign, and in interpolation use prop as 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><divid="app">
  <blog-post v-bind:post="post"></blog-post>
</div>