Vue填充表格数据时出现users未定义的ReferenceError问题求助

错误根源 #

1. Vue版本与API不兼容：你引入的是Vue 2.5.17，但代码中使用了Vue 3才原生支持的Composition API（setup函数、ref、onMounted），Vue 2原生无法识别这些API。
2. 变量未暴露给模板：即便用Vue 3，setup函数中定义的users如果不返回，模板也无法访问到该变量。

解决方案 #

方案一：改用Vue 2原生选项式API（无需额外插件） #

适配当前Vue 2版本，用data、mounted选项实现功能：

<template>
  <div>
    <table class="table m-0">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
          <th scope="col">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.name || '未设置' }}</td>
          <td>{{ user.email || '未设置' }}</td>
          <td>
            <button class="btn btn-primary btn-sm me-2">Edit</button>
            <button class="btn btn-danger btn-sm">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { db } from "@/firebase";
import { collection, getDocs } from "firebase/firestore";

export default {
  data() {
    return {
      users: []
    };
  },
  async mounted() {
    const querySnapshot = await getDocs(collection(db, "users"));
    const fbUsers = [];
    querySnapshot.forEach((doc) => {
      console.log(doc.id, " => ", doc.data());
      // 合并文档ID和数据，模板才能拿到name/email等字段
      fbUsers.push({
        id: doc.id,
        ...doc.data()
      });
    });
    this.users = fbUsers;
  }
};
</script>

<style>
</style>

方案二：让Vue 2支持Composition API（需安装插件） #

如果想继续用Composition API，需安装适配插件：

1. 安装插件：

npm install @vue/composition-api --save

2. 在项目入口文件（如main.js）注册：

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

3. 修改组件代码，确保setup返回变量：

<template>
  <div>
    <table class="table m-0">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
          <th scope="col">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.name || '未设置' }}</td>
          <td>{{ user.email || '未设置' }}</td>
          <td>
            <button class="btn btn-primary btn-sm me-2">Edit</button>
            <button class="btn btn-danger btn-sm">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { db } from "@/firebase";
import { ref, onMounted } from "@vue/composition-api"; // 注意导入来源
import { collection, getDocs } from "firebase/firestore";

export default {
  setup() {
    const users = ref([]);
    onMounted(async () => {
      const querySnapshot = await getDocs(collection(db, "users"));
      const fbUsers = [];
      querySnapshot.forEach((doc) => {
        console.log(doc.id, " => ", doc.data());
        fbUsers.push({
          id: doc.id,
          ...doc.data()
        });
      });
      users.value = fbUsers;
    });
    // 返回变量，模板才能访问
    return { users };
  }
};
</script>

<style>
</style>

额外提示 #

原代码中<td>用了固定文本alksdmad，建议改成绑定用户数据（如user.name），否则无法显示实际用户信息；从Firestore取数据时，记得合并doc.data()的内容，否则只能拿到用户ID，拿不到姓名、邮箱等字段。

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