json - 如何在 Vue.js 中正确显示 JSON 数据？

Question

我最近刚接触 Vue，我正在尝试在我目前正在处理的页面中显示 JSON 数据。

我已经设法让整个 JSON 显示出来，现在我正试图正确显示它而不用括号或对象键，并且每个数据在页面上占据一行。

有人可以帮助我吗？

这是代码：

<template>
  <div class="CityGuidelines">
    <v-card class="guidelines">
      <h2>test</h2>
      <p>This is a test for the new guidelines page card</p>
      {{ info }}
    </v-card>
  </div>
</template>

<script>
import Info from '@/data/info.json'

export default {
  name: 'CityGuidelines',
  data() {
    return {
      info: Info.
    }
  }
}
</script>

部分 JSON 数据

{
  "San Francisco County": {
    "info": [
      {
        "header": "County Guidelines",
        "body": [
          {
            "h4": "Shelter in Place",
            "content": [
              {
                "p2": [
                  {
                    "p": "Residents should remain at home when possible as it is the safest choice. If you do leave your home, keep the following guidelines in mind."
                  }
                ],
                "bullets": [
                  {
                    "bullet": "Maintain 6ft distance between yourself and people who are not in your hosehold unit."
                  },
                  {
                    "bullet": "Wear a mask, scarf, bandana or other facial covering."
                  },
                  {
                    "bullet": "Limit face to face interactions with those vulnerable to the coronavirus such as those over 60 or those with underlying health conditions."
                  },
                  {
                    "bullet": "Wash hands frequently with soap and water for at least 20 seconds, or use hand sanitizer."
                  },
                  {
                    "bullet": "Cover coughs and sneezes with a tissue or fabric or, if not possible, use the sleeve of your shirt or elbow. Do not cough or sneeze into your hand."
                  },
                  {
                    "bullet": "Use antibactiral wipes to clean any surface that you have to touch."
                  }
                ],
                "link": "https://sf.gov/stay-home-except-essential-needs"
              }
            ]
          },

标签： jsonvue.jsvue-component