使用Nuxt+Vuetify获取Firestore数据并填充到表单输入框的问题

你的问题核心由两处错误导致：一是v-for的绑定语法错误，二是数据结构设计、Firestore读写逻辑和实际业务场景不匹配。

问题原因说明 #

你硬编码测试时第一个输入框不显示的根本原因是：你用v-for遍历objects数组，循环变量Name才是数组的每一项对象，但你给v-model绑的是objects.name——objects是数组本身，没有name属性，自然读取不到值。

另外你的业务场景是存储/读取当前登录用户的单条个人信息，不需要用数组存储，也不需要遍历整个Firestore集合，直接操作用户uid对应的单条文档即可。

修正后的完整实现代码 #

表单模板部分

去掉没必要的v-for，直接绑定用户信息对象的属性即可：

<v-form>
  <v-layout>
    <v-row>
      <v-col cols="12" sm="6" md="6">
        <v-text-field v-model="userInfo.name" label="姓名"></v-text-field>
      </v-col>
      <!-- 新增其他表单项直接按这个格式加即可，比如手机号、邮箱等 -->
      <!-- <v-col cols="12" sm="6" md="6">
        <v-text-field v-model="userInfo.phone" label="手机号"></v-text-field>
      </v-col> -->
      <v-col cols="12" sm="6" md="6">
        <v-btn @click="saveUserInfo">保存信息</v-btn>
      </v-col>
    </v-row>
  </v-layout>
</v-form>

逻辑代码部分

import firebase from "firebase/app";
import firestore from "@/plugins/firebasetest";

export default {
  middleware: "authentication",
  layout: 'dashboard',
  data: () => ({
    // 用单个对象存储用户的所有个人信息，不要用数组
    userInfo: {
      name: ''
      // 新增字段直接在这里加对应的key即可
    }
  }),
  async created() {
    const currentUid = firebase.auth().currentUser?.uid
    // 已登录的情况下直接读取对应用户的文档数据
    if(currentUid) {
      await this.readUserInfo(currentUid)
    }
  },
  methods: {
    // 读取当前用户的文档数据，自动回填表单
    async readUserInfo(uid) {
      try {
        const userDoc = await firestore.collection('test').doc(uid).get()
        if(userDoc.exists) {
          this.userInfo = userDoc.data()
        }
      } catch (err) {
        console.error('读取用户信息失败', err)
      }
    },
    // 提交表单保存用户信息到Firestore
    async saveUserInfo() {
      const currentUid = firebase.auth().currentUser?.uid
      if(!currentUid) return
      try {
        await firestore.collection('test').doc(currentUid).set(this.userInfo)
        console.log('信息保存成功')
      } catch (err) {
        console.error('信息保存失败', err)
      }
    }
  }
}

如果你的表单有多个同结构的动态字段（比如用户的多个收货地址），再使用v-for循环处理即可，普通单用户个人信息表单不需要用到循环语法。

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