vue.js v-for not rendering component laravel

Question

I am trying to build user messaging into my site. All of the data is passing through, but for some reason I can't get it to render right on the browser. If i delete the replies if section, the first message will render. The error message in the console is

Error in render function: "TypeError: Cannot read property 'data' of undefined

<template>
    <div v-if="message">

        <ul class="list-inline" v-if="message.users.data.length">
            <li><strong>In conversation</strong></li>
            <li v-for="user in message.users.data">{{ user.first_name }}</li>
        </ul>


        <div class="media" v-for="reply in message.replies.data">
            <div class="media-left">
                <img v-bind:src="reply.user.data.avatar" v-bind:alt="reply.user.data.name + ' avatar'">
            </div>

            <div class="media-body">
                <p>{{ reply.user.data.name }} &bull; {{ reply.created_at_human }}</p>
                <div class="panel panel-default">
                    <div class="panel-body">
                        {{ reply.body }}
                    </div>
                </div>
            </div>
        </div>

        <div class="media">
            <div class="media-left">
                <img v-bind:src="message.user.data.avatar" v-bind:alt="message.user.data.name + ' avatar'">
            </div>
            <div class="media-body">
                <p>{{ message.user.data.name }} &bull; {{ message.created_at_human }}</p>
                <div class="panel panel-default">
                    <div class="panel-body">
                        {{ message.body }}
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import { mapActions, mapGetters } from 'vuex'

    export default {
        computed: mapGetters({
            message: 'currentMessage',
        }),
    }
</script>

///

         message:Object 
    body:"Message two" 
    created_at_human:"1 day ago" 
    id:3 last_reply_human:"1 day ago" 
    parent_id:null replies:Object 
    data:

    Array[2] 
    0:Object 
    body:"Another reply" 
    created_at_human:"1 day ago" 
    id:5 last_reply_human:null 
    parent_id:3 

    1:Object 
    body:"Reply to message two" 
    created_at_human:"1 day ago" 
    id:4 last_reply_human:null 
    parent_id:3 user:Object 

    data:Object avatar:"https://www.gravatar.com/avatar/44a0d18d423d13e1ce8ea37a6e7bb728?s=45&d=mm" 
    id:12 name:"James" 
    users:Object data:

Array[2] 

0:Object avatar:"https://www.gravatar.com/avatar/44a0d18d423d13e1ce8ea37a6e7bb728?s=25&d=mm" 
    id:12 
    name:"James" 

    1:Object avatar:"https://www.gravatar.com/avatar/0b6703d371c28c3c5baef0d80f49a5ea?s=25&d=mm" 
    id:7 
    name:"Dustin"

Bert · Accepted Answer · 2017-08-31 02:53:23Z

1

At some point, message.replies is undefined. That means when you try to access the data property of replies you are throwing the observed error.

You can prevent this with a guard.

<template v-if="message.replies" >
  <div class="media" v-for="reply in message.replies.data">
    ...
  </div>
</template>

The v-if prevents the section from trying to render if there are no replies.

You also may need to handle

<div class="media-left" v-if="reply.user && reply.user.data">
  <img v-bind:src="reply.user.data.avatar" v-bind:alt="reply.user.data.name + ' avatar'">
</div>

and

<div class="media-body" v=if="reply.user && reply.user.data">
  <p>{{ reply.user.data.name }} &bull; {{ reply.created_at_human }}</p>
    <div class="panel panel-default">
      <div class="panel-body">
        {{ reply.body }}
      </div>
    </div>
 </div>

Essentially, anytime you have a long dot chain (something.something.something), you will need to take care to handle cases where the middle something may be undefined.

edited Aug 31, 2017 at 2:53

answered Aug 31, 2017 at 2:37

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dustin Over a year ago

Hey, thanks for the reply, but I get the same error, and still no rendering. I am expecting replies.

Bert Over a year ago

@DustinSeaward Then you are likely missing a user on a reply in some of your data. You use reply.user.data.avatar and reply.user.data.name. If reply.user is ever undefined, you will also get the error.

Dustin Over a year ago

I am not missing any data, it is all manually entered in, and double checked, but I think you are on the right track. If I remove just the statements with reply.user.data I render out the reply.body.

Bert Over a year ago

@DustinSeaward Post the full message object you're trying to render.

Dustin Over a year ago

It's up in the question.

|

Collectives™ on Stack Overflow

vue.js v-for not rendering component laravel

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related