VueJS props are undefined in component
Isn't the information clear enough? What is </<div> in your code?
On the other hand, use v-bind if you want to pass an object. {{ }} is for text interpolation.
For compiling template error remove/fix this tag:</<div>.Also, you have to pass props to the subcomponent like this:
<discuss-post :post="post"></discuss-post>
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: `<div class="card"> <div class="grid-x margin-x"> <div class="cell small-4"> <img class="avatar-img" :src="post.by.profile.img_url" /> <p style="font-family: Abel;font-size: 24px">{{ post.by }}</p> <div> </div> <div class="grid-x margin-x"> <div class="cell small-4"> <p style="font-family: Abel;font-size: 18px">{{ post.content }}</p> </div> </div> </div>`})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" } } } } }})<script src="https://vuejs.org/js/vue.min.js"></script><div class="card-section"> <div id="post-div"> <discuss-post :post="post"></discuss-post> </div></div>
Correct the </<div> with </div> as stated in the answer from @Leoassuming you have an object "post" in your vue instance
you can bind it like
<discuss-post :post="post"></discuss-post>your post must be something like
post ={ "by":{ "profile": { "img_url":"some url" } }, "content":"some content" };