I am recently new to Vue and I am trying to show JSON data in the page I am currently working on.
I've managed to have the whole JSON show and now I am trying to properly show it without brackets or the object keys on it and where each data occupies one line on the page.
Would anyone please assist me on this?
Here is the code:
<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>
Part of the JSON data
{
"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"
}
]
},
