Currently, I am working on a project using vue/nuxt. In order to dynamically load data from a JSON file during compilation, I am utilizing nuxt and webpack (Dynamically get image paths in folder with Nuxt).
The structure of my JSON file is as follows:
{
"Title": "title goes here",
"Ad": "other stuff",
"_latitude": 30.08674842,
"_longitude": -97.29304982
}
A setup has been implemented where any key containing '_' character is considered 'private' and will not be displayed in the publicItemsArray array within the panel.vue component.
In an attempt to remove "Ad" from the display of the panel.vue component, I decided to add an underscore like this:
"_Ad": "other stuff",
While this successfully removed "Ad" from the panel.vue component, it also disappeared from the detailcard.vue component's:
{{myData.Ad}}
I am puzzled by this behavior. How can I resolve this issue and ensure that these components function independently from each other?
The simplified version of my index.html:
<template>
<div>
....
<Card/>
<Panel/>
<Four/>
</div>
</template>
<script>
import Four from '~/components/section4.vue'
import Panel from '~/components/panel.vue'
import Card from '~/components/detailCard.vue'
.......
export default {
components: {
Four,
Panel,
Card,
}
}
</script>
The simplified detailcard.vue component :
<template>
.....
<v-card-text class="headline font-weight-bold">{{myData.Ad}}</v-card-text>
</template>
<script>
import * as data from '../static/info.json';
export default {
data() {
return {
myData:data.default
}
}
}
</script>
The simplified panel.vue component :
<template>
<v-flex>
<v-expansion-panel>
<v-expansion-panel-content v-for="(item,i) in items" :key="i" style="background:#26c6da;color:white">
<div slot="header" class="headline font-weight-bold">{{item.header}}</div>
<v-card>
<v-card-text class="headline font-weight-bold">{{item.text}}</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-flex>
</template>
<script>
import * as data from '../static/info.json';
var itemsArray = [];
Object.keys(data.default).forEach(function(key) {
// console.log(key, data[key]);
itemsArray.push({
header: key,
text: data.default[key]
});
});
// var jsonData = JSON.parse(data);
var publicItemsArray = itemsArray.filter( function(el) {
return !el.header.includes("_")
})
export default {
data() {
return {
panel: 'Sample panel',
items: publicItemsArray
}
}
}
</script>