如何在 Vue.JS 中动态添加元素？

Question

我在弄清楚如何在 Vue 中动态添加元素时遇到了一些麻烦。 我尝试将 V-for 用作 for 循环，但是，output 只是数组中的第二项。 我的目标是为每个数组项创建一个新框。

第一个块是我的脚本代码，包含我的两个 arrays。第二个块是模板或 HTML。我尝试遍历每个 nums 数组并在每个实例中创建一个新框，但是，我无法为创建新框数组中的每个元素。

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

这是代码当前如何运行的图像。 它打印出 arrays 的最后一个元素

任何帮助是极大的赞赏！！

Answer 1

要遍历数组并为每个项目创建一个元素，您可以使用v-for指令。 你像这样使用它：

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

你有应用程序in v-for=(apps, index) for applications" （它应该不是for ）

此外，您在内部和外部for循环中都使用了index变量。 这必然会引起问题。