CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
user_v12
user_v12

Reputation: 589

Vue.js - How to use an array in function for looping

I want to use a JS array in Vue.js function for looping.

Tried code:

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"

By using the above code I am getting the following error;

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

How Can I solve this?

Upvotes: 1

Views: 113

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You're looping through newly_used properties which is returned from computed property so your v-for should be like :

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

or

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

Upvotes: 1

Swordword
Swordword

Reputation: 171

cc.num may work, cc is single item in bbb, and you shoule check if cc exist

Upvotes: 1

Related Questions