Блог

Конструктор роботов курса VueJS: https://app.pluralsight.com/player?course=vuejs-fundamentalsamp;author=jim-cooperamp;name=c8f8ef67-c67b-4a52-b109-9dbf2caae028amp;clip=3amp;mode=live

Мой репозиторий VueJS-RobotBuilder:
https://github.com/leongaban/VueJS-RobotBuilder

В настоящее время я выполняю простое руководство по VueJS, однако получаю ошибку при импорте объекта данных availableParts .

Чего я не понимаю, так это того, что у меня есть объект json из parts.js импортировано правильно в объект данных. И я могу выйти из системы, однако я получаю ошибку в области шаблона, которую я предполагаю?

Полный код:

 <template>
  <div>
    <div class="top-row">
      <div class="top part">
        <img v-bind:src="availableParts.heads[0].src" title="head"/>
        <button class="prev-selector">amp;#9668;</button>
        <button class="next-selector">amp;#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">amp;#9650;</button>
        <button class="next-selector">amp;#9660;</button>
      </div>
      <div class="center part">
        <img v-bind:src="availableParts.torso[0].src" title="torso"/>
        <button class="prev-selector">amp;#9668;</button>
        <button class="next-selector">amp;#9658;</button>
      </div>
      <div class="right part">
        <img v-bind:src="availableParts.arms[0].src" title="right arm"/>
        <button class="prev-selector">amp;#9650;</button>
        <button class="next-selector">amp;#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">amp;#9668;</button>
        <button class="next-selector">amp;#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>

  

parts.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;
  

В данный момент вы возвращаете весь availableParts объект из data , у availableParts которого нет свойства, поэтому vue.js выдает эту ошибку.

Один из способов исправить это — вернуть объект со availableParts свойством, которое содержит ваши данные:

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

Другой способ исправить это — напрямую ссылаться на массивы arms, torsos и т.д. В ваших привязках, например:

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

да, я изменил имя импорта на allAvailableParts, а затем вернул доступные части, указывающие на эти данные. Очень странно, что это работает для него, но тогда, возможно, это что-то более новое.

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

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