如何让额外v-text-field在v-for循环所有元素渲染完成后再显示

问题原因 #

出现这个现象的核心原因是Vue的异步更新机制，如果你的myObject是异步获取/动态赋值的，Vue会先渲染已有的静态内容（也就是你后面写的额外输入框），等myObject数据更新后再批量渲染v-for对应的DOM节点，所以会出现后面的输入框先显示的情况。

解决方案 #

方案1：显示状态控制（最稳妥）

新增一个布尔变量控制最后一个输入框的显示，等myObject数据赋值完成、且对应DOM渲染完毕后再把变量设为true，让输入框显示：

<template>
  <!-- 原有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>

  <!-- 额外TextField加v-if控制 -->
  <v-row v-if="isRenderComplete">
    <v-col>
      <v-text-field
        v-model="modifyDateTime"
        label="Modify date and time"
      />
    </v-col>
  </v-row>
</template>

<script>
export default {
  data() {
    return {
      myObject: {},
      modifyDateTime: '',
      isRenderComplete: false
    }
  },
  methods: {
    async getObjectData() {
      // 模拟异步获取myObject数据的逻辑
      const result = await request.fetchData()
      this.myObject = result.data
      // 等待v-for对应的DOM全部渲染完成后再开启显示
      this.$nextTick(() => {
        this.isRenderComplete = true
      })
    }
  },
  mounted() {
    this.getObjectData()
  }
}
</script>

方案2：简化判断（适合无复杂异步场景）

如果不需要严格等DOM渲染完毕，只要myObject数据存在就显示最后一个输入框，可以直接用内置属性判断，不需要额外变量：

• 如果myObject是数组：<v-row v-if="myObject.length">
• 如果myObject是对象：<v-row v-if="Object.keys(myObject).length">

方案3：监听数据变化（适合myObject动态更新的场景）

如果myObject会多次动态修改，每次修改后都要等新的循环内容渲染完再显示输入框，可以加深度监听：

watch: {
  myObject: {
    deep: true,
    handler() {
      this.$nextTick(() => {
        this.isRenderComplete = true
      })
    }
  }
}

内容的提问来源于stack exchange，提问作者Kirill