Can't pass object from Nuxt.js page to Vue component with prop. Undefined prop variable

Question

I am unable to send data object from Nuxt.js page to a Vue component.

Get an error of Cannot read property 'company' of undefined in component file. So my prop of experience is not being defined. What am I missing?

Nuxt page index.vue

<template>
  <div>
    <ExperienceItem
      v-for="experience in resume.experiences"
      :key="experience.id"
      v.bind:experience="experience"
    />
  </div>
</template>

<script>
import ExperienceItem from '~/components/ExperienceItem'
export default {
  components: {
    ExperienceItem
  },
  data() {
    return {
      resume: {
        name: 'Steve',
        title: 'Software Engineer',
        experiences: [
          {
            id: 1,
            company: 'Tech',
            title: 'Software Engineer',
            dates: 'Aug. 2014 - Mar. 2015'
          },
          {
            id: 1,
            company: 'Tech',
            title: 'Software Engineer',
            dates: 'Aug. 2014 - Mar. 2015'
          }
        ]
      }
    }
  }
}
</script>

ExperienceItem.vue

<template>
  <div>
    <b-card>
      <b-row>
        <b-col cols="4" class="text-right">
          <h3>{{ experience.company }}</h3>
          <h5>{{ experience.dates }}</h5>
        </b-col>
      </b-row>
    </b-card>
  </div>
</template>

<script>
export default {
  name: 'ExperienceItem',
  props: ['experience']
}
</script>

You're making a typo here v.bind:experience="experience" which should be v-bind:experience="experience" — Boussadjra Brahim
– Boussadjra Brahim, Commented Jun 20, 2020 at 22:02

Kelvin Omereshone · Accepted Answer · 2020-06-23 11:04:22Z

1

I believe you made a typo with the usage of the v-bind directive. Instead of v-bind you typed in v.bind. To avoid such typos in the future you could use the shorthand : instead of v-bind(as you were rightfully doing with :key). So your template code would read as:

<template>
  <div>
    <ExperienceItem
      v-for="experience in resume.experiences"
      :key="experience.id"
      :experience="experience"
    />
  </div>
</template>

edited Jun 23, 2020 at 11:04

answered Jun 21, 2020 at 8:23

Kelvin Omereshone

8364 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Can't pass object from Nuxt.js page to Vue component with prop. Undefined prop variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related