Accessing component properties in Vue

Question

I am learning Vue and I have this simple component:

Vue.component('movie-tile', {
  props: ['movie'],
  data: function () {
    return {
      count: 0, 
    }
  },
  template: '<div>{{movie.Id}}</div>'
})

It works and the id is properly displayed but I get a warning:

[Vue warn]: Error in render: "TypeError: movie is undefined"

Now: when I change the template like this:

  template: '<div>{{movie}}</div>'

it works without a problem.

Any idea what's wrong?

Answer 1

movie在这里是您组件的属性，您应该尝试执行以下操作：

<movie-tile movie="{id : 10 , title : 'Harry Poter'}"></movie-tile>