javascript - 来自一个 Vue 组件的数据影响另一个
问题描述
我正在做一个 vue/nuxt 项目。我正在使用 nuxt 和 webpack 在编译时从 json 文件中动态加载数据(使用 Nuxt动态获取文件夹中的图像路径)。
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>
解决方案
您将密钥从 更改Ad
为_Ad
。在您的detailcard.vue
组件中,您仍在引用myData.Ad
不再存在的 。如果要引用正确的值,则必须改为将引用更改为myData._Ad
。
推荐阅读
- android - 使按钮在子句上可用
- c++ - 使用指令可见的声明的名称隐藏
- ssh - 如何在 Ubuntu 服务器上安装 Terraria TShock 服务器?
- ansible - 无法遍历字典,如何检查它是否为空?
- r - 从累积曲线计算密度
- javascript - Blob 的 DataUri 与 Base64 字符串 DataUri
- javascript - 在特定的 html 表列中填充 json 文件取决于对象值
- sql - PARTITION BY 重复的 id 和 JOIN 与具有最小值的 ID
- php - 以下哪一项是从 PHP 类中的函数获取值的最佳实践?
- sql-server - SSIS 数据类型转换问题