VueJS: Property or method … is not defined on the instance but referenced during render

2
votes

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

My VueJS-RobotBuilder repo: https://github.com/leongaban/VueJS-RobotBuilder

I'm currently doing a simple tutorial on VueJS, however getting an error on an imported data object availableParts.

What I don't understand is that I have the json object from parts.js imported correctly in the data object. And I can log it out, however I get an error in the template area I assume?

enter image description here

Full code:

<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>

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;
2
javascriptvue.js
You are assigning availableParts into component data. So you either need to change data into return {availableParts: availableParts} , or in your template remove availableParts. – ljubadr
I have the same error today going through that course, very confusing – Andrew

2 Answers

3
votes

You are currently returning the whole availableParts object from data which does not have an availableParts property so vue.js gives you this error.

One way to fix it to return an object with an availableParts property which contains your data:

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

The other way to fix this to directly reference the arms, torsos, etc. arrays in your bindings, e.g:

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

yea I changed the import name to allAvailableParts and then returned the availableParts pointing to that data. Very strange that it works for him but then maybe this is something newer introduced.

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

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