来自一个Vue组件的数据会影响另一个组件

Question

我正在研究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>

Answer 1

您_Ad密钥从Ad更改为_Ad 。 在detailcard.vue组件中，您仍在引用myData.Ad ，它不再存在。 如果要引用正确的值，则必须改为对myData._Ad引用。