How to Dynamically Add Elements in Vue.JS?

Question

I am having a little trouble figuring out how to dynamically add elements in Vue. I tried using the V-for as a for loop, however, the output is just the second item in the array. My goal is to create a new box for each of the array items.

The first block is my script code containing my two arrays. The second block is the template or HTML. I tried to loop through each of the numbs array and create a new box in each instance, however, I am having trouble creating new boxes for each element in the array.

<script>
export default{
  data(){
    return{
      numbs: ['Application 1', 'Application 2'],
      applications: [
        { ver: '0.99911', status: 'Ready for Sale', deploymentD: '09/10/2020', deploymentC: 'XXXX'},
        { ver: '0.99911', status: 'Ready for Sale', deploymentD: '09/10/2020', deploymentC: 'XXXX'}

      ]
    }
  }
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div class="body">

  <div class="box"
  v-for="(demo, index) in numbs"
  :key="index">
    <div class="heading">
      {{demo}}
    </div>
    <button class="info"><router-link to = "/viewapp">View</router-link></button>
    <button class="edit"><router-link to = "/editapp">Edit</router-link></button>
    <img class ="place" src="../images/imageinsert.jpg" />
    <div class ="summary" 
      v-for="(apps, index) of applications"
      :key="index">
      Application Version {{apps.ver}}
      {{apps.status}}, {{apps.deploymentD}}, {{apps.deploymentC}}
    </div>
    </div>

   
</div>
</template>

Here is an image of how the code currently runs. It prints out the last element of both arrays

Any help is greatly appreciated!!

JakeParis · Accepted Answer · 2020-05-28 18:35:25Z

2

To loop through an array and create an element for each item, you use the v-for directive. You use it like so:

<div class="summary" v-for="(apps, index) in applications" :key="index">
   Application Version {{apps.ver}}
   {{apps.status}}, {{apps.deploymentD}}, {{apps.deploymentC}}
</div>

You have v-for=(apps, index) for applications" (it should be in not for)

Also, you are using the index variable in both the inner and outer for loops. That's bound to cause an issue.

edited May 28, 2020 at 18:35

answered May 28, 2020 at 18:29

JakeParis

11.2k6 gold badges44 silver badges67 bronze badges

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

2 Comments

sopatd Over a year ago

Thank you for spotting that mistake! I main issue is creating new box divs for each element in the array. I tried to run the for loop in that div, but I'm not sure why it isn't creating a new box for each of the values in the numb array.

JakeParis Over a year ago

@sptech updated my answer. You are using the index variable for 2 different things.

Collectives™ on Stack Overflow

How to Dynamically Add Elements in Vue.JS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related