0

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>
isherwood
  • 58,414
  • 16
  • 114
  • 157
user1592380
  • 34,265
  • 92
  • 284
  • 515

1 Answers1

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.

B. Fleming
  • 7,170
  • 1
  • 18
  • 36
  • You are right. I'm now trying to think of a way to toggle the properties displayed in the panel.vue component's display without affecting other components. Any thoughts? – user1592380 Jun 10 '19 at 19:51
  • One idea immediately comes to mind: Instead of checking for underscores in the name of the key, have the key assigned to a nested object that contains the `content` as well as an `isPrivate` boolean. For example, do `Ad: { content: "other stuff", isPrivate: true}`. – B. Fleming Jun 10 '19 at 20:00
  • The problem you're ultimately encountering is that you're trying to entangle the data itself with its representation. Choosing whether or not to name an object property in such a way that it's interpreted as private is just bad practice, especially if you decide in the future that it needs to be public instead. All cases where that property is referenced would need to be updated to reflect the change. By using a boolean flag instead, none of your components need to be updated if you decide to switch between private and public. – B. Fleming Jun 10 '19 at 20:05
  • Thanks, I'll try that! – user1592380 Jun 10 '19 at 20:39