[Fixed]-VueJS props are undefined in component

by

6👍

✅

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>
👤Navjot Ahuja

4👍

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.

👤Leo

3👍

Correct the </<div> with </div> as stated in the answer from @Leo
assuming 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" 
     };
👤CodeHacker

Leave a comment