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

【问题标题】：Display html element after v-for loop was finishedv-for 循环结束后显示 html 元素
【发布时间】：2021-12-04 18:26:15
【问题描述】：

我有元素的对象，我使用 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-for 块之后添加了额外的 v-text-field，它比 v-for 中的元素更早显示 循环渲染。

我该如何解决这个问题？我需要在渲染元素 v-for 循环之后立即显示最后一个 v-text-field 元素

【问题讨论】：

将两者都包装在<div v-if="myObject.length">
@LawrenceCherone 谢谢！现在可以使用了
不要将索引用作:key ...尤其是与任何输入元素一起使用...
@MichalLevý 为什么？
因为将index 用作key 与不使用key at all 相同

标签： javascript typescript vue.js

【解决方案1】：

在循环中使用 v-if

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

【讨论】：

这是个好主意，但你为什么要在Object.keys(item).length - 1 中检查item？我认为你应该检查Object.keys(myObject).length - 1