Home » vue » Accessing component properties in Vue

Accessing component properties in Vue

Posted by: admin November 26, 2021 Leave a comment

Questions:

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?

Answers:

movie here is a property of your component you should try something like this :

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