Home » vue » Vue.js – How to pass prop as a json array and use it correctly in child component?

Vue.js – How to pass prop as a json array and use it correctly in child component?

Posted by: admin November 26, 2021 Leave a comment

Questions:

Laravel and Vue are being used. Data is being returned to Vue from Laravel. The Vue prop being send to the Vue child component is a json object array of objects, however, the child component errors when reading it. The error in the console is:

“TypeError: Cannot read property ‘id’ of undefined”. Any help would be greatly appreciated.

This is the raw data returned from Laravel is:

{"channels":[{"id":4,"name":"AI","created_at":"2020-04-27T15:18:01.000000Z","updated_at":"2020-04-27T15:18:01.000000Z"},{"id":2,"name":"Android Development","created_at":"2020-04-27T15:18:01.000000Z","updated_at":"2020-04-27T15:18:01.000000Z"},{"id":3,"name":"iOS Development","created_at":"2020-04-27T15:18:01.000000Z","updated_at":"2020-04-27T15:18:01.000000Z"},{"id":1,"name":"Web Development","created_at":"2020-04-27T15:18:01.000000Z","updated_at":"2020-04-27T15:18:01.000000Z"}]}

The data being passed as a Vue prop to a child component:

<template>
  <div id="component">
     <router-link :to="{ name: 'home' }">Home</router-link>
            <router-view></router-view>
      <br>
            <vue-chat :channels="channels"></vue-chat>
    </div>
</template>

<script>

export default {


data() {
            return {
            channels: [],
            }   
    },

methods: {

      fetchChannels() {

      let endpoint = `/channels`;

        axios.get(endpoint).then(resp => {
                    this.channels = resp.data.channels;          
                });
        },

      },

      created() {
      this.fetchChannels();
      }

}

</script>

The child component that errors when attempting to access the Vue prop:

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
            <!--    <div class="card-header">Chat</div> -->

                <div class="card-body">

                     <div class="container">

                    </div>   

                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {

    props: ['channels'],

    data() {
            return {
            activeChannel: this.channels[0].id,

        }   
    },

}
</script>

<style scoped>
@import '/sass/app.scss';
</style>
Answers:

At first time channels is not available which raises that error, i recommend to define activeChannel as computed property like :

export default {

    props: ['channels'],

    data() {
            return {


        }   
    },
  computed:{
    activeChannel(){
     return this.channels[0]? this.channels[0].id:null,
   }

}

###

Did you check your data channels with Vue Devtools on chrome?
You may try to change below line.

this.channels = resp.data.channels; to this.channels = JSON.parse(resp.data.channels);