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

Posted 2023-02-23

【中文标题】VueJS：属性或方法......未在实例上定义，但在渲染期间引用

【英文标题】：VueJS: Property or method ... is not defined on the instance but referenced during render

【发布时间】：2019-08-08 04:49:54

【问题描述】：

VueJS 课程 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>

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 分配到组件数据中。所以您要么需要将数据更改为return availableParts: availableParts ，要么在您的模板中删除availableParts.

我今天在学习那门课程时遇到了同样的错误，非常混乱

【参考方案1】：

您当前正在从没有 availableParts 属性的 data 返回整个 availableParts 对象，因此 vue.js 会出现此错误。

修复它的一种方法是返回一个带有 availableParts 属性的对象，其中包含您的数据：

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

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

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

【参考方案2】：

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

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

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