Data from one Vue component affecting another

Question

I'm working on a vue/nuxt project. I'm using nuxt and webpack to dynamically load data from a json file when compiling ( Dynamically get image paths in folder with Nuxt ).

The Json file looks like:

{
  "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.

I decided to add an underscore to remove "Ad" from the panel.vue component's display

"_Ad":  "other stuff",

This worked but ad ALSO disappeared from detailcard.vue component's

{{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:

<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 :

    <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 :

<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

You changed the key from Ad to _Ad . In your detailcard.vue component, you're still referencing myData.Ad , which no longer exists. If you want to reference the correct value, you must change your reference to myData._Ad instead.