Vue.js Can'；t使用prop将对象从Nuxt.js页面传递到Vue组件。未定义的prop变量

我无法将数据对象从Nuxt.js页面发送到Vue组件

获取错误

无法读取组件文件中未定义的

的属性“company”。所以我的

经验的支柱没有被定义。我错过了什么

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>


从“~/components/ExperienceItem”导入ExperienceItem
导出默认值{
组成部分：{
经验项目
},
数据（）{
返回{
简历：{
姓名：'史蒂夫'，
标题：“软件工程师”，
经验：[
{
id:1，
公司：'科技'，
标题：“软件工程师”，
日期：2014年8月至2015年3月
},
{
id:1，
公司：'科技'，
标题：“软件工程师”，
日期：2014年8月至2015年3月
}
]
}
}
}
}

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>


{{experience.company}}
{{experience.dates}
导出默认值{
名称：'ExperienceItem'，
道具：[“体验”]
}
我相信您使用了
v-bind
指令，这是一个输入错误。您输入的不是
v.bind
，而是
v.bind
。为了避免将来出现此类打字错误，您可以使用速记
：
，而不是
v-bind
（正如您正确使用
：key
）。因此，您的模板代码应为：


您在这里输入了一个拼写错误
v.bind:experience=“experience”
应该是
v-bind:experience=“experience”
Omg。非常感谢。现在工作。