Vue.js - Leveraging arrays in functions for efficient iteration

Question

Vue.js - Leveraging arrays in functions for efficient iteration

I need help using a JS array in a Vue.js function for looping.

Here is the code I tried:

Vue:

computed: {
 bbb: function(){
  var vvv=this.Preused.length-this.quote.lines.length;
  let added_products=[];
  if(vvv > 0){
    for(var i = 0; i <= vvv-1; i++){
      newly_used.push({...this.Preused[this.manage.code.length+i]});
    }
  }
  return newly_used;
 }
}

HTML:

<div v-for="(cc,index) in bbb">
  <p v-text="cc[index].num"></p>
</div>

newly_used:

0:
  none: "calibry"
  des: "Silver"
  num: "numty"

After implementing the above code, I encountered the following error message;

[Vue warn]: Error in render: "TypeError: Cannot read property 'num' of undefined"

Any suggestions on how to resolve this issue?

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

cc.num could potentially be the solution. In this case, cc represents a single item in bbb. It's important to verify if cc actually exists before proceeding.

Answer 2

cc.num could potentially be the solution. In this case, cc represents a single item in bbb. It's important to verify if cc actually exists before proceeding.

Answer 3

Answer №2

If you are iterating through the newly_used properties, which are returned from a computed property, then your v-for loop should be structured as follows:

<div v-for="(cc,index) in bbb" :key="index">
  <p v-text="cc.num"></p>
</div>

Alternatively, you can also use the following structure:

<div v-for="(cc,key,index) in bbb" :key="index">
  <p v-text="bbb[key].num"></p>
</div>

Answer 4

If you are iterating through the newly_used properties, which are returned from a computed property, then your v-for loop should be structured as follows:

<div v-for="(cc,index) in bbb" :key="index">
  <p v-text="cc.num"></p>
</div>

Alternatively, you can also use the following structure:

<div v-for="(cc,key,index) in bbb" :key="index">
  <p v-text="bbb[key].num"></p>
</div>

Vue.js - Leveraging arrays in functions for efficient iteration

Answer №1

Answer №2

Similar questions

Convert data into a tree view in JavaScript, with two levels of nesting and the lowest level represented as an array

Combining meshes results in a lower frame rate

What is the best way to partially change a CSS class name in Vue?

Ensure the http request is finished before loading the template

Displaying an array of objects in the MUI Datagrid interface

Switch the text style when hovering, then switch it back upon second hovering

There seems to be an issue with npm displaying an inaccurate version number for my

Checking the existence of a user's email in Node.js

Exploring the compatibility of Angular.js with iframes in Firefox

Creating a dropdown menu utilizing JavaScript/jQuery arrays

What is the best way to integrate model classes within an Angular module?

Unfulfilled expectation of a promise within an array slipping through the cracks of a for loop

Error: The function a.then is not recognized during the production compilation process

Bidirectional communication between server and client using socket.io in node.js

The error message displays "window.addEventListener is not a function", indicating that

Merging a VUE project and a .NET framework project to unleash their full potential

Tips for updating VUE's main.js file to incorporate the routers/index.js configuration

performing asynchronous iteration with HTTP PUT requests

Using dangerouslySetInnerHTML in React within a Fragment

The function WebForm_DoCallback is not recognized