Vue3中无法遍历对象数组并获取属性的问题求助

常见错误原因 #

• 响应式数据未正确初始化：如果questions没有声明为Vue3的响应式变量（ref或reactive），从Firestore获取数据后赋值无法触发视图更新，导致内容不显示。
• Firestore数据获取逻辑错误：异步获取数据时未正确处理Promise，或未将返回的文档数据正确映射到questions数组。
• v-for渲染结构不合理：当前代码给每个question生成独立的<ul>标签，虽不影响显示，但不符合常规列表结构，易造成混淆。

具体解决步骤 #

1. 确保questions为响应式变量

以Vue3 <script setup>写法为例，初始化响应式数组：

import { ref } from 'vue'
import { collection, getDocs } from 'firebase/firestore'
import { db } from './your-firebase-config' // 替换为你的Firestore配置文件

// 初始化为空数组的响应式引用
const questions = ref([])

const getData = async () => {
  // 从Firestore指定集合获取数据
  const querySnapshot = await getDocs(collection(db, 'your-collection-name'))
  // 将文档数据映射到questions数组
  questions.value = querySnapshot.docs.map(doc => doc.data())
  // 可添加日志验证数据结构
  console.log('获取到的数据：', questions.value)
}

如果使用选项式API，需在data中声明：

export default {
  data() {
    return {
      questions: []
    }
  },
  methods: {
    async getData() {
      const querySnapshot = await getDocs(collection(db, 'your-collection-name'))
      this.questions = querySnapshot.docs.map(doc => doc.data())
    }
  }
}

2. 优化v-for渲染结构

将v-for移到<li>标签上，用<ul>作为统一列表容器，符合HTML语义：

<template>
  <div
    class="shadow-xl w-96 h-96 md:h-[600px] md:w-[600px] lg:my-12 lg:w-[700px] lg:h-[700px] rounded-md"
  >
    <button @click="getData">Get data</button>
    <ul>
      <li v-for="question in questions" :key="question.answer">
        {{ question.answer }}
      </li>
    </ul>
  </div>
</template>

3. 验证数据结构

在getData方法中添加console.log，确认从Firestore返回的数据结构与预期一致（包含answer字段），避免因字段名拼写错误导致无法访问。

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