Interested in creating a list using vue.js?

Question

Interested in creating a list using vue.js?

Whenever I attempt to show a list from an array of data, I encounter the following error message:

cannot read property 'name' of undefined

.

HTML

<div id="list">
  <myitems v-for="item in list" v-bind:my="item">
</div>

JavaScript

In my JavaScript code snippet, I define a Vue component called 'myitems' with a prop of 'my', and a template that displays information related to each item.

Next, I create a new instance of the 'myitems' component and pass in an array of objects containing name and age properties. However, when attempting to mount the component onto the element with the id 'list', the aforementioned error occurs.

I suspect that there may be an issue with how I am iterating over the items using 'v-for' and binding them to the 'my' prop. Any suggestions on what steps to take next would be greatly appreciated.

javascript vue.js

Answer 1

Answer №1

It seems like the issue lies within your html code. The <myitems> tag must be contained within the v-for directive in order for it to function properly. Make sure not to declare the <myitems> tag separately. You can try revising your code as shown below:

Updated HTML

<div id="list" v-for="item in list" >
  <myitems  v-bind:my="item"></myitems>
</div>

Answer 2

It seems like the issue lies within your html code. The <myitems> tag must be contained within the v-for directive in order for it to function properly. Make sure not to declare the <myitems> tag separately. You can try revising your code as shown below:

Updated HTML

<div id="list" v-for="item in list" >
  <myitems  v-bind:my="item"></myitems>
</div>

Answer 3

Answer №2

Hey, looks like there are a few issues in your code that need addressing.

First off, it seems like you haven't defined the root Vue instance correctly. It should be set up like this:

new Vue({
  data: {
    list: [
      {name: 'myName', age: 25}
    ]
  }
}).$mount("#list");

Your component registration is correct, so keep it as is:

var items = Vue.component('myitems', {
  props: ['my'],
  template: `<li>{{my.name}} {{my.age}}</li>`
});

You also forgot to wrap your component within a ul tag since your template returns an li.

<div id="list">
  <ul>
    <myitems v-for="item in list" v-bind:my="item"></myitems>
  </ul>
</div>

Check out this working example: https://jsfiddle.net/am5Ldp9k/

Answer 4

Hey, looks like there are a few issues in your code that need addressing.

First off, it seems like you haven't defined the root Vue instance correctly. It should be set up like this:

new Vue({
  data: {
    list: [
      {name: 'myName', age: 25}
    ]
  }
}).$mount("#list");

Your component registration is correct, so keep it as is:

var items = Vue.component('myitems', {
  props: ['my'],
  template: `<li>{{my.name}} {{my.age}}</li>`
});

You also forgot to wrap your component within a ul tag since your template returns an li.

<div id="list">
  <ul>
    <myitems v-for="item in list" v-bind:my="item"></myitems>
  </ul>
</div>

Check out this working example: https://jsfiddle.net/am5Ldp9k/

Answer 5

Answer №3

Your code has a few issues that need to be addressed. Firstly, there is no need to assign a variable to Vue components that you register. Once you register them with Vue.component, they will automatically be available to you.

Vue.component('myitems', {
  props: ['my'],
  template: '<li>{{my.name}} {{my.age}}</li>'
});

Secondly, it is important to have a root component. This can be achieved by initializing a new Vue instance using new Vue():

new Vue({
  el: '#list',
  data: {
    list: [{ name: 'myName', age: 25 }]
  }
});

You must provide an element ID or class as the root element, along with any data that needs to be passed down to child elements. Once you make these adjustments, your code should work correctly. Feel free to refer to this jsfiddle for a functional example: https://jsfiddle.net/coligo/49gptnad/

Answer 6

Your code has a few issues that need to be addressed. Firstly, there is no need to assign a variable to Vue components that you register. Once you register them with Vue.component, they will automatically be available to you.

Vue.component('myitems', {
  props: ['my'],
  template: '<li>{{my.name}} {{my.age}}</li>'
});

Secondly, it is important to have a root component. This can be achieved by initializing a new Vue instance using new Vue():

new Vue({
  el: '#list',
  data: {
    list: [{ name: 'myName', age: 25 }]
  }
});

You must provide an element ID or class as the root element, along with any data that needs to be passed down to child elements. Once you make these adjustments, your code should work correctly. Feel free to refer to this jsfiddle for a functional example: https://jsfiddle.net/coligo/49gptnad/

Interested in creating a list using vue.js?

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve specific information from a JSON file and save it in an array using Node.js/JavaScript

Unable to create a new user account

How can I detect a DOM element mutation based on a CSS selector, and if this is possible, how can it be accomplished?

The RemoveEventListener function seems to be malfunctioning within Angular2 when implemented with TypeScript

How can one retrieve the set-cookie value in a <meta http-equiv> tag using Node.js?

What steps should I take to ensure my clock stays in sync with my runTime function?

Guide to automating tests on MAC using Protractor with Appium and IOS-Simulator

Troubleshooting: ng-disabled feature is not properly functioning with Bootstrap buttons

Experimenting with two distinct click events using vue-test-utils

Angular Material Clock Picker for 24-Hour Time Selection

JavaScript: Targeting elements by their tag name within a designated container

What are the methods for altering the material of a glTF model using THREE.js?

Inspect each chart for information and conceal any that are empty

What is the process of molding items?

Guide on importing a React.Component from a Content Delivery Network (CDN) and displaying it within a separate React

Leveraging the Scroll feature in Bootstrap for smooth scrolling

Is it possible for two-way binding to function in index.html within Angular 4?

Angular Material Password Confirmation

If a user touches outside of the scroll component on mobile, the scroll in the popup freezes

Ways to differentiate between an angular element and a jQuery element