Vue.js中从Firebase文档数自动设置v-text-field值遇NaN问题

你的countLastItem方法里，Firebase的db.collection().get()是异步操作，当前方法没有返回任何值（默认返回undefined），你直接同步调用var b = this.countLastItem()时，b是undefined，转成Number就会得到NaN。虽然控制台能打印出querySnapshot.size，但那是异步回调里的内容，和方法返回值无关。

1. 修正countLastItem方法，返回Promise #

把方法改成返回Promise，才能获取到异步操作的结果：

countLastItem() {
  // 返回Firebase查询的Promise
  return db.collection("Kontrolne naloge").get().then(querySnapshot => {
    console.log(querySnapshot.size);
    return querySnapshot.size; // size本身是数字类型，无需转Number
  });
}

2. 正确调用异步方法 #

异步操作不能直接同步赋值，需要用async/await或者.then()处理：

方式一：使用async/await（推荐，代码更直观） #

在调用方法前加async，用await获取结果后赋值给ID：

async fetchAndSetID() {
  const count = await this.countLastItem();
  this.ID = count + 1; // 直接给v-model绑定的变量赋值
  console.log(this.ID);
}

在组件生命周期（比如mounted）里调用这个方法：

mounted() {
  this.fetchAndSetID();
}

方式二：使用.then()回调 #

如果不想用async/await，也可以用链式调用：

this.countLastItem().then(count => {
  this.ID = count + 1;
  console.log(this.ID);
});

3. 模板代码无需修改 #

你的v-text-field已经绑定v-model="ID"，只要ID赋值正确，禁用的输入框会自动显示对应值。

直接用集合文档总数+1作为ID存在并发冲突风险：如果两个用户同时加载页面，会拿到相同的count值，添加文档时会生成重复的ID_Naloge。如果需要唯一自增ID，更可靠的方式是：

• 使用Firebase自动生成的文档ID（add()方法返回的ID）
• 单独维护一个计数器文档，用事务更新计数器来获取唯一自增值

// 修正后的countLastItem方法
countLastItem() {
  return db.collection("Kontrolne naloge").get().then(querySnapshot => {
    return querySnapshot.size;
  });
}

// 组件挂载时获取并设置ID
async mounted() {
  const count = await this.countLastItem();
  this.ID = count + 1;
}

// 提交方法保持不变
submit() {
  this.snackbar = true
  const project = {
    ID_Naloge: Number(this.ID),
    Kriterij_FK: Number(this.Kriterij),
    Letnik_FK: Number(this.Letnik),
    Naslov: this.Naslov,
    Poglavje_FK: Number(this.Poglavje), 
    Predmet_FK: Number(this.Predmet),
    Rešitev_FK: Number(this.Rešitev),
    Stopnja_Težavnosti_FK: Number(this.Stopnja),
    Točke: Number(this.Točke),
  }
  db.collection('Kontrolne naloge').add(project).then(() => {
    console.log(this.ID)
  })
  this.resetForm();
}

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