來自一個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引用。