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

Question

我正在开发一个 vue/nuxt 项目。我正在使用 nuxt 和 webpack 在编译时从 json 文件中动态加载数据 (Dynamically get image paths in folder with Nuxt)。

Json 文件如下所示：

{
  "Title": "title goes here",
  "Ad":  "other stuff",
  "_latitude": 30.08674842,
  "_longitude": -97.29304982

}

我已经设置好了，如果你在键中有一个'_'，那么这个属性就是'private'并且不会显示在 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。在您的detailcard.vue 组件中，您仍在引用myData.Ad，它不再存在。如果要引用正确的值，则必须改为将引用更改为 myData._Ad。