Javascript VueJS:属性或方法。。。未在实例上定义，但在渲染期间引用

VueJS课程机器人生成器：

我的VueJS RobotBuilder回购：

我目前正在做一个关于VueJS的简单教程，但是在导入的数据对象

availableParts

上出现了一个错误

我不明白的是，我在数据对象中正确导入了parts.js中的json对象。我可以注销它，但是我假设在模板区域出现错误

完整代码：

<template>
  <div>
    <div class="top-row">
      <div class="top part">
        <img v-bind:src="availableParts.heads[0].src" title="head"/>
        <button class="prev-selector">&#9668;</button>
        <button class="next-selector">&#9658;</button>
      </div>
    </div>
    <div class="middle-row">
      <div class="left part">
        <img v-bind:src="availableParts.arms[0].src" title="left arm"/>
        <button class="prev-selector">&#9650;</button>
        <button class="next-selector">&#9660;</button>
      </div>
      <div class="center part">
        <img v-bind:src="availableParts.torso[0].src" title="torso"/>
        <button class="prev-selector">&#9668;</button>
        <button class="next-selector">&#9658;</button>
      </div>
      <div class="right part">
        <img v-bind:src="availableParts.arms[0].src" title="right arm"/>
        <button class="prev-selector">&#9650;</button>
        <button class="next-selector">&#9660;</button>
      </div>
    </div>
    <div class="bottom-row">
      <div class="bottom part">
        <img v-bind:src="availableParts.bases[0].src" title="base"/>
        <button class="prev-selector">&#9668;</button>
        <button class="next-selector">&#9658;</button>
      </div>
    </div>
  </div>
</template>

<script>
import availableParts from '../../data/parts';

console.log('availableParts', availableParts);

export default {
  name: 'RobotBuilder',
  data() {
    return availableParts;
  },
};
</script>

<style>
.part {
  position: relative;
  width:165px;
  height:165px;
  border: 3px solid #aaa;
}
.part img {
  width:165px;
}
.top-row {
  display:flex;
  justify-content: space-around;
}
.middle-row {
  display:flex;
  justify-content: center;
}
.bottom-row {
  display:flex;
  justify-content: space-around;
  border-top: none;
}
.head {
  border-bottom: none;
}
.left {
  border-right: none;
}
.right {
  border-left: none;
}
.left img {
  transform: rotate(-90deg);
}
.right img {
  transform: rotate(90deg);
}
.bottom {
  border-top: none;
}
.prev-selector {
  position: absolute;
  z-index:1;
  top: -3px;
  left: -28px;
  width: 25px;
  height: 171px;
}
.next-selector {
  position: absolute;
  z-index:1;
  top: -3px;
  right: -28px;
  width: 25px;
  height: 171px;
}
.center .prev-selector, .center .next-selector {
  opacity:0.8;
}
.left .prev-selector {
  top: -28px;
  left: -3px;
  width: 144px;
  height: 25px;
}
.left .next-selector {
  top: auto;
  bottom: -28px;
  left: -3px;
  width: 144px;
  height: 25px;
}
.right .prev-selector {
  top: -28px;
  left: 24px;
  width: 144px;
  height: 25px;
}
.right .next-selector {
  top: auto;
  bottom: -28px;
  left: 24px;
  width: 144px;
  height: 25px;
}
.right .next-selector {
  right: -3px;
}
</style>

---

您当前正在从

数据返回整个
availableParts
对象，该对象没有
availableParts
属性，因此vue.js会显示此错误

修复此问题的一种方法是返回包含数据的
availableParts
属性的对象：

export default {
  name: 'RobotBuilder',
  data() {
    return { availableParts: availableParts };
  },
};

解决此问题的另一种方法是直接引用绑定中的arms、Torso等数组，例如：

v-bind:src="heads[0].src"

是的，我将导入名称更改为allAvailableParts，然后返回指向该数据的availableParts。这对他来说很奇怪，但也许这是新的东西

import allAvailableParts from '../../data/parts';

export default {
  name: 'RobotBuilder',
  data() {
    return { availableParts: allAvailableParts };
  },
};

您正在将
可用部件
分配到组件数据中。因此，您需要将数据更改为
返回{availableParts:availableParts}
，或者在模板中删除
availableParts。
我今天在学习该课程时遇到了相同的错误，非常混乱
import allAvailableParts from '../../data/parts';

export default {
  name: 'RobotBuilder',
  data() {
    return { availableParts: allAvailableParts };
  },
};