[英]Data from one Vue component affecting another
I'm working on a vue/nuxt project. 我正在研究vue / nuxt项目。 I'm using nuxt and webpack to dynamically load data from a json file when compiling ( Dynamically get image paths in folder with Nuxt ).
我在编译时使用nuxt和webpack从json文件动态加载数据(使用Nuxt 动态获取文件夹中的图像路径 )。
The Json file looks like: Json文件如下所示:
{
"Title": "title goes here",
"Ad": "other stuff",
"_latitude": 30.08674842,
"_longitude": -97.29304982
} }
I've set it up so that if you have a '_' in the key the property is 'private' and will not be displayed in panel.vue component's publicItemsArray array. 我已对其进行了设置,以便如果键中包含“ _”,则该属性为“私有”,并且不会显示在panel.vue组件的publicItemsArray数组中。
I decided to add an underscore to remove "Ad" from the panel.vue component's display 我决定添加下划线以从panel.vue组件的显示中删除“广告”
"_Ad": "other stuff",
This worked but ad ALSO disappeared from detailcard.vue component's 此方法有效,但广告也从detailcard.vue组件的
{{myData.Ad}} {{myData.Ad}}
Why is this happening? 为什么会这样呢? How can I fix it so that the components are independent of each other?
我如何解决它,使组件彼此独立?
My (simplified) index.html contains: 我的(简体)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>
My simplified detailcard.vue component : 我简化的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>
My simplified panel.vue component : 我简化的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>
You changed the key from Ad
to _Ad
. 您
_Ad
密钥从Ad
更改为_Ad
。 In your detailcard.vue
component, you're still referencing myData.Ad
, which no longer exists. 在
detailcard.vue
组件中,您仍在引用myData.Ad
,它不再存在。 If you want to reference the correct value, you must change your reference to myData._Ad
instead. 如果要引用正确的值,则必须改为对
myData._Ad
引用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.