我正在研究vue / nuxt项目。编译(Dynamically get image paths in folder with Nuxt)时,我使用nuxt和webpack从json文件动态加载数据。
Json文件如下:
{
"Title": "title goes here",
"Ad": "other stuff",
"_latitude": 30.08674842,
"_longitude": -97.29304982
}
我已经对其进行了设置,以便如果键中包含“ _”,则该属性为“私有”,并且不会显示在panel.vue组件的publicItemsArray数组中。
我决定添加下划线以从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>
答案 0 :(得分:1)
您已将密钥从Ad
更改为_Ad
。在detailcard.vue
组件中,您仍在引用myData.Ad
,后者不再存在。如果要引用正确的值,则必须将引用更改为myData._Ad
。