javascript - VueJS : Property or method . .. 未在实例上定义但在渲染期间被引用

Question

VueJS 类(class) Robot Builder: https://app.pluralsight.com/player?course=vuejs-fundamentals&author=jim-cooper&name=c8f8ef67-c67b-4a52-b109-9dbf2caae028&clip=3&mode=live

我的 VueJS-RobotBuilder 存储库: https://github.com/leongaban/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>

零件.js

const images = require.context('./images', true, /\.png$/);

const parts = {
  heads: [
    {
      id: 1,
      description:
        'A robot head with an unusually large eye and teloscpic neck -- excellent for exploring high spaces.',
      title: 'Large Cyclops',
      src: images('./head-big-eye.png'),
      type: 'heads',
      cost: 1225.5,
    },
    {
      id: 2,
      description: 'A friendly robot head with two eyes and a smile -- great for domestic use.',
      title: 'Friendly Bot',
      src: images('./head-friendly.png'),
      cost: 945.0,
      type: 'heads',
      onSale: true,
    },
    {
      id: 3,
      description:
        'A large three-eyed head with a shredder for a mouth -- great for crushing light medals or shredding documents.',
      title: 'Shredder',
      src: images('./head-shredder.png'),
      type: 'heads',
      cost: 1275.5,
    },
    {
      id: 4,
      description:
        'A simple single-eyed head -- simple and inexpensive.',
      title: 'Small Cyclops',
      src: images('./head-single-eye.png'),
      type: 'heads',
      cost: 750.0,
    },
    {
      id: 5,
      description:
        'A robot head with three oscillating eyes -- excellent for surveillance.',
      title: 'Surveillance Bot',
      src: images('./head-surveillance.png'),
      type: 'heads',
      cost: 1255.5,
    },
  ],
  arms: [
    {
      id: 1,
      description: 'An articulated arm with a claw -- great for reaching around corners or working in tight spaces.',
      title: 'Articulated',
      src: images('./arm-articulated-claw.png'),
      type: 'arms',
      cost: 275,
    },
    {
      id: 2,
      description: 'An arm with two independent claws -- great when you need an extra hand. Need four hands? Equip your bot with two of these arms.',
      title: 'Two Clawed',
      src: images('./arm-dual-claw.png'),
      type: 'arms',
      cost: 285,
    },
    {
      id: 3,
      description: 'A telescoping arm with a grabber.',
      title: 'Grabber',
      src: images('./arm-grabber.png'),
      type: 'arms',
      cost: 205.5,
    },
    {
      id: 4,
      description: 'An arm with a propeller -- good for propulsion or as a cooling fan.',
      title: 'Propeller',
      src: images('./arm-propeller.png'),
      type: 'arms',
      cost: 230,
      onSale: true,
    },
    {
      id: 5,
      description: 'A short and stubby arm with a claw -- simple, but cheap.',
      title: 'Stubby Claw',
      src: images('./arm-stubby-claw.png'),
      type: 'arms',
      cost: 125,
    },
  ],
  torsos: [
    {
      id: 1,
      description: 'A torso that can bend slightly at the waist and equiped with a heat guage.',
      title: 'Flexible Gauged',
      src: images('./torso-flexible-gauged.png'),
      type: 'torsos',
      cost: 1575,
    },
    {
      id: 2,
      description: 'A less flexible torso with a battery gauge.',
      title: 'Gauged',
      src: images('./torso-gauged.png'),
      type: 'torsos',
      cost: 1385,
    },
    {
      id: 2,
      description: 'A simple torso with a pouch for carrying items.',
      title: 'Gauged',
      src: images('./torso-pouch.png'),
      type: 'torsos',
      cost: 785,
      onSale: true,
    },
  ],
  bases: [
    {
      id: 1,
      description: 'A two wheeled base with an accelerometer for stability.',
      title: 'Double Wheeled',
      src: images('./base-double-wheel.png'),
      type: 'bases',
      cost: 895,
    },
    {
      id: 2,
      description: 'A rocket base capable of high speed, controlled flight.',
      title: 'Rocket',
      src: images('./base-rocket.png'),
      type: 'bases',
      cost: 1520.5,
    },
    {
      id: 3,
      description: 'A single-wheeled base with an accelerometer capable of higher speeds and navigating rougher terrain than the two-wheeled variety.',
      title: 'Single Wheeled',
      src: images('./base-single-wheel.png'),
      type: 'bases',
      cost: 1190.5,
    },
    {
      id: 4,
      description: 'A spring base - great for reaching high places.',
      title: 'Spring',
      src: images('./base-spring.png'),
      type: 'bases',
      cost: 1190.5,
    },
    {
      id: 5,
      description: 'An inexpensive three-wheeled base. only capable of slow speeds and can only function on smooth surfaces.',
      title: 'Triple Wheeled',
      src: images('./base-triple-wheel.png'),
      type: 'bases',
      cost: 700.5,
    },
  ],
};
export default parts;

Answer 1

您当前从 data 返回整个 availableParts 对象，它没有 availableParts 属性，所以 vue.js 给您这个错误。

修复它以返回具有包含您的数据的 availableParts 属性的对象的一种方法:

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

解决此问题的另一种方法是直接引用绑定(bind)中的 ARM 、躯干等数组，例如:

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