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

Question

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?

Swordword · Accepted Answer · 2020-10-15 16:12:03Z

1

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

answered Oct 15, 2020 at 16:12

Swordword

1717 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boussadjra Brahim · Accepted Answer · 2020-10-15 16:16:29Z

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>

answered Oct 15, 2020 at 16:16

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related