Vue.js 如何在vue js模板中添加foreach和for循环

"我希望对我从JSON文件中获取的测验问题和答案进行分类. 在VUE模板中.我try 了v-for指令，但我不能使用模板中的Object键. 为了更清楚地说明，我将在脚本部分演示到目前为止我所做的工作. 希望拥有与此类似的东西: 1-第一个问题

• A/第一个答案
• B/发送应答 ……

这是VUE文件

<template>
  <div class="lg:pl-64 flex flex-col">

    <div v-for="data in datas">
      <h1>{{ data.question }}</h1>
    </div>
    <div>
      // looking to add multiple choice answers in here
    </div>

  </div>
</template>
<script setup>
import myData from "../data/data.json"
const datas = myData
const answers = []


datas.forEach((element) => {
  // pushing all the answers from JSON file to the answers array
  answers.push(element.answers)
})

// looping throught the arrays of objects to bring the key and value
answers.forEach((answer) => {
  for (let i = 0; i < answer.length; i++) {
    for (const key in answer[i]) {
      console.log(`${key}: ${answer[i][key]}`)
    }
  }
})
</script>

这是data.JSON文件

[
  {
    "id": 1,
    "question": "first Question",
    "answers": [{
        "a" : "first answer1",
        "b" : "second answer1",
        "c" : "third answer1",
        "z" : "fourth answer1"
    }],
    "correct": "a"
  }
,
    {
      "id": 2,
      "question": "second Question",
      "answers": [{
          "a" : "first answer2",
          "b" : "second answer2",
          "c" : "third answer2",
          "z" : "fourth answer2"
      }],
      "correct": "a"
    }
]