VueJS: The variable being referenced in the render is neither a defined property nor method of the instance

Question

VueJS: The variable being referenced in the render is neither a defined property nor method of the instance

Check out this VueJS course on building Robots: VueJS Course Link

My VueJS-RobotBuilder repository: RobotBuilder Repo

Currently, I am working on a VueJS tutorial that involves an issue with an imported data object called availableParts.

I have successfully imported the JSON object from parts.js into the data object, and I can see it logged out. However, there seems to be an error in the template section. Any ideas on what might be causing this?

https://i.sstatic.net/kJN4W.png

Full code:

<template>
  ...
</template>

<script>
import availableParts from '../../data/parts';

console.log('availableParts', availableParts);

export default {
  ...
};
</script>

<style>
  ...
</style>

parts.js

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

const parts = {
  ...
};
export default parts;

javascript vue.js

Answer 1

Answer №1

Currently, the issue lies in returning the entire availableParts object from the data object, which does not possess an availableParts property. This results in an error in vue.js.

To resolve this, one solution is to modify the return to include an availableParts property containing your data:

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

Alternatively, you can directly reference the arms, torsos, etc. arrays in your bindings. For example:

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

Answer 2

Currently, the issue lies in returning the entire availableParts object from the data object, which does not possess an availableParts property. This results in an error in vue.js.

To resolve this, one solution is to modify the return to include an availableParts property containing your data:

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

Alternatively, you can directly reference the arms, torsos, etc. arrays in your bindings. For example:

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

Answer 3

Answer №2

Yes, I updated the import name to allAvailableParts and then returned the availableParts pointing to that data. It's interesting that it worked for him, maybe this is a new feature that was recently introduced.

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

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

Answer 4

Yes, I updated the import name to allAvailableParts and then returned the availableParts pointing to that data. It's interesting that it worked for him, maybe this is a new feature that was recently introduced.

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

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

VueJS: The variable being referenced in the render is neither a defined property nor method of the instance

Answer №1

Answer №2

Similar questions

Styling Material UI height in select elements (React)

Introducing a delay in an observable causes incomplete data to be received in Angular using rxjs

Tips for automatically inserting a "read more" link once text exceeds a certain character count

Angular Bootstrap's tabs feature a powerful select() function that allows users to easily

Ensure to use e.preventDefault() method when handling form submissions

Ways to transmit information among Vue components

What is the best way to target and manipulate the transform property of multiple div elements in JavaScript?

Is it true that Vue 3 + Inertia automatically removes event listeners upon component unmounting?

Tips for resolving the issue with TypeError: arr[Symbol.iterator] not being a function in my React application

Positioning Input and Dropdown Elements within a Data Table Using CSS

Using ReactJS to trigger a timer function on a button click

Incorporating database row data into JavaScript objects: a guide

Transferring documents using JavaScript

Tips for updating Nodejs' module dependency to a newer version

Looking to scan through a directory of .html files in Node.js to find specific element attributes?

Say goodbye to document.write?

Automatically hide a label after a certain amount of time following a button click

Implement a select element with an onchange event that triggers an AJAX

I am encountering a problem where I lose the values of a nested array of objects when trying to push it into another array

The onload function on the iframe is triggering twice in Internet Explorer 11