VueJS props are undefined in component

Question

I am trying to integrate VueJS with my frontend for my Django applications. I have the following Vue code in a javascript file:

window.onload = function() {
    Vue.component('discuss-post', {
        props: ['post'],
        template:  `
                        
                            
                                
                                {{ post.by }}
                            
                        
                        
                            
                                {{ post.content }}
                            
                        
                    `
    })
    var postDiv = new Vue({
        el: "#post-div"
    })
}

And the following code in an HTML file:

            
                {% for feed in feeds %}
                {% for post in feed %}
                
                    
                
                {% endfor %}
                {% endfor %}

However, when I load my page I get these errors in my console:

What in my code could be causing these errors to be raised?

user_3151735 · Answer

For compiling template error remove/fix this tag:. Also, you have to pass props to the subcomponent like this:

For your profile value error, you have to check your JSON structure in data.

See the following example:

Vue.component('discuss-post', {
  props: ['post'],
  template: `
                     
                       
                         
                         {{ post.by }}
                       
                     
               
                 
                   {{ post.content }}
                 
               
          `
})
var postDiv = new Vue({
  el: "#post-div",
  data: function() {
    return {
      post: {
        content: "Post Content",
        by: {
          profile: {
            img_url: "http://www.gstatic.com/webp/gallery/1.jpg"
          }
        }
      }
    }
  }
})

VueJS props are undefined in component

3 Answers