Я работаю над проектом vue / nuxt. Я использую Nuxt и Webpack для динамической загрузки данных из файла JSON при компиляции ( Динамически получать пути к изображениям в папке с Nuxt ).
Файл Json выглядит так:
{
"Title": "title goes here",
"Ad": "other stuff",
"_latitude": 30.08674842,
"_longitude": -97.29304982
}
Я настроил его так, чтобы, если у вас в ключе было _, свойство 'private' не будет отображаться в массиве publicItemsArray компонента panel.vue.
Я решил добавить символ подчеркивания, чтобы убрать "Ad" с экрана компонента panel.vue
"_Ad": "other stuff",
Это сработало, но объявление также исчезло из компонента detailcard.vue
.
{{myData.Ad}}
Почему это происходит? Как это исправить, чтобы компоненты не зависели друг от друга?
Мой (упрощенный) 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>
Мой упрощенный компонент detailcard.vue:
<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>
Мой упрощенный компонент panel.vue:
<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>