Как динамически добавлять элементы в Vue. JS?

Question

У меня небольшие проблемы с выяснением того, как динамически добавлять элементы в Vue. Я пробовал использовать V-for как для l oop, однако вывод - это всего лишь второй элемент в массиве. Моя цель - создать новое поле для каждого элемента массива.

Первый блок - это мой код сценария, содержащий два моих массива. Второй блок - это шаблон или HTML. Я пробовал l oop через каждый массив numbs и создавать новое поле в каждом экземпляре, однако у меня возникли проблемы с созданием новых полей для каждого элемента в массиве.

<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>

Вот изображение того, как код в настоящее время работает. Он распечатывает последний элемент обоих массивов

Любая помощь приветствуется !!

Answer 1

Чтобы l oop через массив и создать элемент для каждого элемента, вы используете директиву v-for. Вы используете его так:

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

У вас есть v-for=(apps, index) for applications" (это должно быть in не for)

Также , вы используете index переменная как во внутреннем, так и во внешнем for циклах. Это обязательно вызовет проблему.