How To Access Individual Elements From A Prop Object In Vue

I am new to Vue and studied the other questions here and can not seem to work out how to pass an object to a child component and reference individual elements of that object. I wa

Solution 1:

You are passing just 1 prop footerData but you have defined 4 in Footer.vue. Just define 1 prop in Footer.vue, and access as this.footerData[0].titleFooter, ...

export default {
 props: {
   footerData: Array,
 },

 data () {
   return {
     copyright: "Copyright 2020: ",
     startCR: this.footerData[0].titleFooter,
     mNum: this.footerData[0].mainNumber,
     oNum: this.footerData[0].otherNumber,
     emailUs: this.footerData[0].emailUs
   }
 },
}

You can handle the array in Footer.vue. You should define as many props as v-bind you are sending. https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props