我的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">◄</button>
<button class="next-selector">►</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">▲</button>
<button class="next-selector">▼</button>
</div>
<div class="center part">
<img v-bind:src="availableParts.torso[0].src" title="torso"/>
<button class="prev-selector">◄</button>
<button class="next-selector">►</button>
</div>
<div class="right part">
<img v-bind:src="availableParts.arms[0].src" title="right arm"/>
<button class="prev-selector">▲</button>
<button class="next-selector">▼</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">◄</button>
<button class="next-selector">►</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;
答案 0 :(得分:2)
您当前正在从availableParts
返回整个data
对象,该对象没有availableParts
属性,因此vue.js会给您此错误。
一种修复它的方法,以返回带有availableParts
属性的对象,该对象包含您的数据:
export default {
name: 'RobotBuilder',
data() {
return { availableParts: availableParts };
},
};
另一种解决此问题的方法,可以直接在绑定中引用手臂,躯干等数组,例如:
v-bind:src="heads[0].src"
答案 1 :(得分:0)
是的,我将导入名称更改为allAvailableParts,然后返回了指向该数据的availableParts。很奇怪,它对他有用,但是也许这是新引入的。
import allAvailableParts from '../../data/parts';
export default {
name: 'RobotBuilder',
data() {
return { availableParts: allAvailableParts };
},
};