How to push objects to an array in Vue 3 while i < 5

Question

I am attempting to set up a button function in Vue 3 that handles pushing objects to an array in a for loop, while i < 5:

const addFeatureObjs = () => {
  for (let i = 0; i < 5; i++) {
    // featureObjArray.value.push({ id: null, feature: null })
    featureObjArray.value[i] = { id: null, feature: null }
  }
}

So far, I have a for loop set up to create 5 instances of the object while i < 5. However, I wish to set up this function so that each button click call to addFeatureObjs creates a new object one click at a time until 5 are created, instead of calling addFeatureObjs to create the 5 objects all at once. How can I go about setting up this function, for loop, and array to enable creating each object one at a time, until 5 are created?

you would not need a for loop if each button press creates a single item - just create function addFeatureObj = () => featureObjArray.value.push({ id: null, feature: null }); ... and call it on click ... — Bravo
– Bravo, Commented Jun 17, 2022 at 3:57
Ah ok. If I use featureObjArray.value.push({ id: null, feature: null }) instead, how can I prevent the user from adding more than 5 objects to the array? — JS_is_awesome18
– JS_is_awesome18, Commented Jun 17, 2022 at 4:00

Robby Cornelissen · Accepted Answer · 2022-06-17 03:59:44Z

2

Just check the length of the array before pushing:

const addFeatureObjs = () => {
  if (featureObjArray.value.length <= 5) {
    featureObjArray.value.push({ id: null, feature: null });
  }
}

answered Jun 17, 2022 at 3:59

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

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

Collectives™ on Stack Overflow

How to push objects to an array in Vue 3 while i < 5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related