@petritr

my is a bit cleaner/best practice again

Yeah you tell yourself that, fool.

@cuwa - There is no place here for that sort of comment. I do not agree with @petritr comments on best practice but it doesnt make them wrong.

In my view in this case the use of argument destructuring in his response is misleading given the comment that the person with the problem is a beginner to this, so adding advance ES6 features are likely confuse, hence my answers are based on the Laravel and VueJS documented examples as Im pretty sure they are best practice examples of the frameworks!

@cuwa you just created an account to comment on my comments WTF(idiot)? @D9705996 you are right i agree.

@petritr - Don't flatter yourself, it's not for you. You just happen to be my first comment.

@D9705996 - oh please, what I said wasn't even bad.

@cuwa p***y, comment from your real profile!

@petritr It's working fine since i commented out user.profile.bio but gives an error if uncomment it

  <div class="container-fluid">
     <div class="block-header">
            <h2>All Users</h2>
            <small class="text-muted">All Registered Users</small>
      </div>
            <hr>
            <button type="button" class="btn btn-raised btn-info waves-effect"  data-toggle="modal" data-target="#exampleModal"> <i class="material-icons">person_add</i> </button>
            <table class="table table-hover">
                <tbody>
                   <tr>
                       <th></th>
                       <th>Name</th>
                       <th>Email</th>
                       <th>Phone</th>
                       <th>Type</th>
                       <th>Modify</th>
                   </tr>
                   <tr v-for="user in users" :key="user.id">
                       <td></td>
                      <td>{{ user.name }}</td>
                       <td>{{ user.email }}</td>
                       <td>{{ user.id_number}}</td>
                       <td>{{ user.photo }}</td>
                       <!-- <td>{{ user.profile.bio}}</td> -->

                       <td>
                           <a href="">
                                <i class="material-icons">mode_edit</i>
                           </a>
                           <a href="">
                                <i class="material-icons">delete</i>
                           </a>
                       </td>

                   </tr>
                </tbody>
            </table>
       <Modal></Modal>
  </div>
</template>

<script>
import Modal from './Modal.vue';

    export default {
       components:{Modal},
       data(){
           return {
               users: [],
           }
       },
       methods: {
           loadStudent(){

                axios.get('/api/user').then(({ data }) => { this.users= data;})
                .catch((err) => console.error(err));


           },

       },
        created(){
            this.loadStudent();

        },

        }
</script>

@simangae when you un-comment and save do you see the error in the front end or in the editor? Can you please save and check? Should work.

@petritr - This is it

@cuwa okay i "believe".

@petritr It's in the front end

[Vue warn]: Error in render: "TypeError: Cannot read property 'bio' of null"

@simangae - what error do you get when you re-add the user.profile.bio?

From the example data I can see it is structured correctly so should work and print "Some info here"

[
  {
    "id": 13,
    "name": "Joseph WhatNot",
    "email": "[email protected]",
    "email_verified_at": null,
    "phone": "0834602415",
    "type": "admin",
    "photo": "user.png",
    "created_at": "2018-10-03 06:44:50",
    "updated_at": "2018-10-03 06:44:50",
    "profile": {
      "id": 2,
      "user_id": 13,
      "phone": null,
      "dob": "21 feb 2000",
      "id_number": "93444245556",
      "gender": "male",
      "course": "MCA",
      "address": "2nd Street\nHillside",
      "bio": "Some info here",
      "created_at": "2018-10-03 06:44:50",
      "updated_at": "2018-10-03 06:44:50"
    }
  }
]

Is your bio field optional as this will cause your error if a user hasn't set a bio?

Try changing this <td>{{ user.profile.bio}}</td> to

<td>{{ user.profile.bio || 'No profile Provided'}}</td>

What happens now?

This means profile is coming back as null. Generally speaking it means the the user's profile relationship is coming back as null.

@simangae what happens if you just {{ user.profile }} do you see any data in front end ? If so past them.

@petritr Yes There Profiles shows as an object

@simangae do you see bio there with content or only as null ?

@D9705996 Still giving the same error, I have even changed the browser

@simangae try <td v-if="user.profile.bio !== null>{{ user.profile.bio}}</td>

@petritr Yes bio shows with content

@simangae try <td v-if="user.profile.bio !== null>{{ user.profile.bio}}</td>

@petritr - That should work and nicer than the || method. Probably don't need !== null

e.g.

<td v-if="user.profile.bio>{{ user.profile.bio}}</td>

@D9705996 yes correct! A bit better.

@petritr, @D9705996 Seems to work I think Chrome was caching, I had to clear all history and clean cache.. Thank You..

@simangae you are welcome you can give the correct answer to the one you think, i woud be happy with like comment too. :)