在v-for循环结束后显示html元素

Question

我有一个带有元素的对象，我使用v-for循环在页面上显示它们:

<template v-for="(item, index) in myObject">
<v-row :key="index">
<v-col>
<v-text-field
v-model="item.value"
:label="item.name"
/>
</v-col>
</v-row>
</template>

<!-- additional TextField -->
<v-row>
<v-col>
<v-text-field
v-model="modifyDateTime"
label="Modify date and time"
/>
</v-col>
</v-row>

它工作正常，但我添加了额外的v-text-field后面的v-for并且它比v-for中的元素更早出现循环显示。

我该如何解决这个问题?我需要显示最后一个v-text-field元素后的元素v-for循环被渲染

Answer 1

use v-if in loop

<template v-for="(item, index) in myObject">
<v-row :key="index">
<v-col>
<v-text-field
v-model="item.value"
:label="item.name"
/>
</v-col>
</v-row>
<!-- additional TextField -->
<v-row v-if="index == Object.keys(item).length - 1">
<v-col>
<v-text-field
v-model="modifyDateTime"
label="Modify date and time"
/>
</v-col>
</v-row>
</template>