CODEWITHSUNDEEP
javascriptvue.js
timv
timv

Reputation: 3366

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 want all elements of the object to be able to be individually accessed and used in the footer template where appropriate. I am using NPM from node-js and run the dev with npm run dev

In my root component, App.Vue, I have as follows: (unrelated lines omitted)

<template>
<div>
  <router-view></router-view>
  <bbay-footer v-bind:footerData="footerData"></bbay-footer>
</div>
</template>

<script>
import Footer from './Components/SiteWide/Footer.vue'

export default {
  components: {
    'bbay-footer': Footer,
  },
  data() {
    return {
        footerData: [{
                titleFooter: 'My Computer Support',
                mainNumber: '0411111111',
                otherNumber: '0400000000',
                emailUs: 'mailto:[email protected]'
      }]
    }
  }
}
</script>

Now in Footer.vue I have:

<template>
  <footer>
   <p>{{startCR}} - {{copyright}} </p>
  </footer>
</template>

<script>
export default {
  props: {
    titleFooter: String,
    mainNumber: Number,
    otherNumber: Number,
    emailUs: String
  },

  data () {
    return {
      copyright: "Copyright 2020: ",
      startCR: this.footerData.titleFooter,
      mNum: footerData.mainNumber,
      oNum: footerData.otherNumber,
      emailUs: footerData.emailUs
    }
  },
}
</script>

Upvotes: 0

Views: 752

Answers (1)

Jose Fern&#225;ndez
Jose Fern&#225;ndez

Reputation: 139

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://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

Upvotes: 3

Related Questions